07 сентября 2022 г. Первоначально опубликовано на techvblogs.com・5 мин. на чтение

Что означает оптимизация производительности ReactJS?

Самое простое определение оптимизации производительности — это просто улучшение отклика приложения на основе ReactJS. Лучшая компания-разработчик reactjs выбрала бы это. В React оптимизация производительности может выполняться разными способами. Команда React предоставила исчерпывающую документацию по этому вопросу. В этой статье мы рассмотрим и постараемся понять множество наиболее эффективных стратегий оптимизации производительности в ReactJS.

Требуется ли оптимизация производительности ReactJS?

При создании приложений с помощью ReactJS оптимизация производительности часто не является главным приоритетом. Это связано с тем, что быстрая интерактивность приложений является ключевым приоритетом для ReactJS как библиотеки. При работе с React отзывчивость приложений является важным элементом производительности. Термин «отзывчивость» описывает, насколько быстро приложения реагируют на действия пользователя. React использует несколько довольно новых и популярных технологий, включая виртуальный DOM во всей структуре, для создания невероятно отзывчивых приложений. Пользовательские интерфейсы приложений React загружаются быстрее благодаря виртуальным DOM, которые являются просто виртуальными дубликатами реальных DOM. Это стало возможным благодаря виртуальным DOM, которые избавляют от необходимости загружать каждый компонент страницы более одного раза.

Но как программисты мы постоянно стремимся улучшить производительность наших приложений. Отзывчивость, а также производительность наших пользовательских интерфейсов React можно улучшить различными способами. В этой статье мы рассмотрим несколько основных стратегий оптимизации производительности ReactJS.

Как оптимизировать производительность ReactJS

Производство

Сначала мы должны спросить: «Что такое производственная сборка?» Вы можете использовать встроенные оптимизации в рабочей сборке React. Хотя при создании пользовательского интерфейса можно выбрать работу в режиме разработки, рекомендуется развертывать пользовательский интерфейс с помощью производственной сборки, особенно если вы испытываете проблемы с производительностью. Приложение Create React, Webpack и другие инструменты содержат производственную сборку. Давайте сначала поймем, что рабочая сборка выполняет для наших приложений, прежде чем углубляться в то, как ее использовать.
Какие функции есть у рабочей сборки? Производственная сборка создает мини-пакеты, оптимизированные ресурсы и более компактные исходные карты. Таким образом, загрузка пользовательского интерфейса происходит быстрее.

Давайте рассмотрим развертывание рабочей сборки приложения в React с помощью create-react-app
Сначала мы запускаем производственную сборку командой:

npm run build

Затем его можно развернуть, извлекая производственную сборку из папки сборки/проекта.

Профилирование

Начнем с определения профилирования. В React профилирование влечет за собой расчет как частоты, так и стоимости рендеринга компонентов в приложении. Скелет пользовательского интерфейса React состоит из компонентов. Компоненты React получают теги HTML и берут на себя роль DOM. Естественно, улучшение компонентов повысит производительность ваших программ. Профилирование — это именно то, на что это похоже. Чтобы решить проблемы с производительностью, профилировщики могут точно определить элементы, которые замедляют работу приложения, и обеспечить оптимизацию, например запоминание.

Для профилирования компонентов в режиме DEV или в режиме разработки React предлагает нам React DevTools Profiler. React-dom 16.5 и react-native 0.57 поддерживают расширенное профилирование компонентов с помощью DevTools Profiler. DevTools легко устанавливается как расширение для браузера, что позволяет повысить скорость работы ваших программ, пока они еще находятся в разработке.

Окно

Сначала опишем работу с окнами. Работа с окнами в ReactJS позволяет отображать меньшие части строк данных через определенные промежутки времени. В результате время повторного рендеринга компонентов резко сокращается. Кроме того, он создает меньше узлов DOM одновременно. Естественно, скорость приложения повышается, а задержка предотвращается, поскольку в любой момент времени представляется меньшее количество информации.

У нас есть встроенные оконные библиотеки с React. Чтобы правильно отображать данные, вы можете использовать react-window и react-virtualized. Эти оконные библиотеки состоят из множества многократно используемых частей, которые можно использовать для эффективного отображения данных, структурированных в виде таблиц, сеток или списков.

Примирение

Что означает согласование ReactJS? Согласование — это акт обновления виртуальных DOM в React, проще говоря. Скорость вашего приложения может сильно пострадать из-за ненужных модификаций виртуального DOM. Поэтому вы можете использовать это как стратегию оптимизации скорости, следя за тем, чтобы виртуальные DOM изменялись только тогда, когда это необходимо.

Каждый раз, когда состояние компонента или реквизиты изменяются, React решает, необходимо ли реальное изменение DOM. Это достигается путем сравнения мгновенно возвращенного элемента и предшествующих визуализированных элементов. Только когда переменные не равны, React обновляет DOM. Несмотря на то, что React обновляет только обновленные узлы DOM, повторный рендеринг может занять много времени. Мы можем переопределить функцию жизненного цикла, которая вызывается при повторном рендеринге, если эта процедура резко замедляет темп работы приложения. Имя этой функции — shouldComponentUpdate.

Неизменяемая структура данных

Вы можете подумать об использовании неизменяемых структур данных в качестве метода оптимизации производительности — или даже коммерческой тайны — для повышения скорости ваших приложений. Идея использования неизменяемой структуры данных для повышения производительности довольно проста. Данные, которые не меняются постоянно, проще обрабатывать и, следовательно, обрабатывать быстрее. Аналогично этому, использование неизменной или неизменяемой структуры данных для состояний и свойств в React значительно повышает эффективность вашего кода. Кроме того, вы тратите меньше времени на кодирование и поддержку своего программного обеспечения, поскольку оно не требует дополнительной работы или других API.

Вы можете использовать синтаксис распространения массивов непосредственно в приложении create-реагировать. EcmaScript6 в React способен распознавать этот синтаксис.

handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};

Заключение

В завершение мы рассмотрели в этом посте ключевые стратегии для оптимизации эффективности ваших проектов React. Платформа React серьезно относится к необходимости повышения эффективности приложений и предоставляет разработчикам широкий спектр инструментов, включая встроенный синтаксис, функции, внешние библиотеки и API. Важно помнить, что было бы отличной практикой программирования использовать некоторые из этих стратегий во всех ваших проектах React, например, использование неизменяемой структуры данных или запуск приложений в производственной сборке. Однако, когда ваше программное обеспечение демонстрирует заметные проблемы с производительностью, может потребоваться множество дополнительных методов.

В этом посте мы всесторонне рассмотрели темы оптимизации производительности, такие как производственная сборка приложений, профилирование, работа с окнами, согласование и неизменяемые структуры данных. Это ключевые методы оптимизации производительности в React, которые можно легко реализовать. Однако существует множество дополнительных простых методов кодирования, которые мы можем использовать для улучшения функциональности наших приложений React.

Спасибо за чтение этого блога.