Оптимизация приложения React

1. useMemo

useMemo - это ловушка React, которая возвращает запомненное значение некоторого вычисления.

Мемоизация - это метод сохранения результатов выполнения функции для предотвращения повторных вычислений. Эта оптимизация используется для увеличения скорости вашего приложения.

Функция useMemo выполняется в 2 случаях:

1. Начальный рендер
2. Изменился массив зависимостей

Давайте посмотрим на пример того, как вы можете применить его к своему приложению ReactJS:

Помните,

Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендеринге.

Используй это.

2. Отказ от событий JavaScript

Одна из самых больших ошибок, которую я часто вижу, - это ОТСУТСТВИЕ функции устранения дребезга.

Ты серьезно?

Функция Debounce необходима для того, чтобы конкретная задача не запускалась слишком часто и не снижала производительность браузера.

Как это работает?

Debounce возвращает функцию, которая не будет запускаться, пока продолжает выполняться. Возвращенная функция будет вызвана после того, как она перестанет вызываться в течение N миллисекунд.

Посмотрим, как это работает:

А теперь займемся оптимизацией в реальной жизни.

Например, у вас есть вход, который отправляет значение поиска при каждом изменении на сервер:

Функция sendSearchValueToServer срабатывает при каждом изменении ввода. Запросы к API очень много, давайте оптимизируем с помощью debounce.

Теперь вы понимаете, насколько важен дребезг?

3. Удалите определение встроенной функции в функции рендеринга.

Общая ошибка.

И вы можете даже не почувствовать, что приложение «работает медленнее». Но это сложный эффект: чем больше ваше приложение, тем медленнее оно работает.

В чем проблема?

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

Как это исправить?

Давайте посмотрим на пример:

В конце

Теперь вы знаете 3 метода оптимизации вашего приложения React. Вот и все. Спасибо за прочтение!