Узнайте, как оптимизировать производительность приложения React, правильно используя хуки useMemo () и useCallback (), а также узнайте, когда использовать React.memo функция.

Знаете ли вы, что React предлагает функцию под названием React.memo для оптимизации производительности? А также знаете ли вы, что React предлагает хуки под названием useCallback () и useMemo (), которые снова могут оптимизировать производительность приложения ?. Вы не знаете, когда использовать какую технику? Я объясню наиболее распространенные варианты использования этих методов на простом примере, чтобы вы могли изучать и выпускать высокопроизводительные приложения для реагирования в будущем.

React.memo

React.memo - это компонент более высокого порядка. Вы можете заключить свой компонент в React.memo (‹Component /›) для повышения производительности, запомнив результат компонента.

Вот простой пример.

Если вы присмотритесь, каждый раз, когда мы нажимаем кнопку «Вверх», чтобы увеличить локальное состояние , наш дочерний компонент повторно отрисовывает, в этом нет необходимости, поскольку свойство, переданное дочернему компоненту, никогда не изменяется.

Мы можем использовать функцию React.memo для запоминания дочернего компонента, чтобы избежать ненужного повторного рендеринга. React.memo - это HOC, который будет повторно отображать компонент только при изменении свойств.

useCallback () Крюк

Хук useCallback () возвращает мемоизированный обратный вызов.

Чтобы узнать, как использовать эту ловушку, нам сначала нужно сломать мемоизированный компонент, который мы создали выше.

Я передал функцию incrementChildState в качестве опоры дочернему компоненту.

Давайте теперь посмотрим, как это работает.

Итак, мы вернулись на круги своя. Наш React.memo больше не работает, и дочерний компонент повторно визуализируется, даже если мы только увеличиваем состояние в родительском компоненте.

useCallback () спешит на помощь :)

Но прежде чем мы начнем, нам нужно понять концепцию ссылочного равенства в JavaScript.

Вот суперинформативная статья, написанная Дмитрием Павлутиным, которая четко объясняет концепцию ссылочного равенства.

Итак, в основном определение ссылочного равенства в нашем контексте происходит при каждом рендеринге, который мы создаем совершенно новую функцию incrementChildState.

Итак, наш дочерний компонент, заключенный в HOC React.memo, выполняет проверку ссылочного равенства и видит, что свойство setNumber изменяется в каждом цикле рендеринга, отсюда и повторный рендеринг мемоизированной функции.

Хук useCallback () принимает два аргумента и затем возвращает новую функцию. Первый аргумент - это функция, которую нам нужно запомнить, а второй аргумент - это массив зависимостей, который похож на массив зависимостей хука useEffect (), мы никогда не хотим, чтобы функция изменялась, поэтому мы передаем пустой массив зависимостей.

С этим изменением функция memoizedCallback останется прежней.

useMemo () Крюк

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

Рассмотрим пример, в котором мы вычисляем наибольшее значение в массиве и отображаем его.

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

Хук useMemo () принимает функцию в качестве аргумента и кэширует функцию до тех пор, пока аргументы, от которых она зависит, не изменятся.

Поздравления ⚡

Если вам удастся зайти так далеко, то я надеюсь, что вы узнали кое-что об useCallback (), useMemo и React.memo.

Мой дескриптор в твиттере: @kabeerajin

Я узнал все эти крутые концепции из видео на YouTube. Вот ссылка на суперинформативное видео на YouTube от Хаима.

Спасибо!