1) Избегайте использования индекса в качестве ключа для карты:
Мы часто видим, как индекс используется в качестве ключа при отображении списка. Но использование ключа в качестве индекса может показать вашему приложению неверные данные, поскольку они используются для идентификации элементов DOM. Всякий раз, когда вы нажимаете или удаляете элемент из списка, если ключ такой же, как и раньше, React предполагает, что элемент DOM представляет тот же компонент, всегда рекомендуется использовать уникальное свойство, такое как id, в качестве ключа.
2) Анализ и оптимизация Webpack Bundle Bloat:
Если вы используете Webpack, вам следует проверить и проанализировать пакет приложений, чтобы удалить ненужные плагины или модули. Вы можете рассмотреть возможность использования Webpack Bundle Analyzer, который поможет вам визуализировать размер выходных файлов webpack с интерактивной масштабируемой древовидной картой, мне это нравится.
3) Использование неизменяемых структур данных:
О неизменяемых структурах данных можно многое узнать. Неизменяемость данных исходит из мира функционального программирования. Я настоятельно рекомендую вам прочитать о «Неизменяемости данных», так как есть о чем поговорить.
4) Используйте React.Fragments:
Я спросил себя, зачем использовать React Fragment, когда я мог бы просто использовать div, потому что мне любопытно и я увлечен веб-производительностью, провел некоторые исследования и обнаружил, что div создает дополнительные оболочки HTML-элементов, поэтому производительность div немного ниже.
