1. Введение

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

2. Крючки?

После выпуска версии React 16.8 мы впервые познакомились с новой функцией под названием «Хуки», которая позволяет нам управлять изменениями состояния и методами жизненного цикла внутри функциональных компонентов, а не на основе классов.

Фактически, работа с локальным состоянием, эффектами и контекстом React стала возможной с функциональными компонентами с помощью таких хуков, как useState, useEffect и useContext.

Кроме того, хуки включают в себя множество других функций, таких как useReducer, useCallback, useMemo, useRef…

Вы можете получить более подробную информацию об этих API в документации React API.

3. Что такое хук useMemo и для чего он нужен?

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

Процесс повторного рендеринга в react запускается в каждом жизненном цикле компонента каждый раз, когда происходит обновление, и такие операции, как «циклы for», могут потребовать времени, памяти и вычислительной мощности.

Дорогостоящие операции могут снизить производительность и, следовательно, ухудшить взаимодействие с пользователем.

Поэтому React выпустил мемо-хук, чтобы справиться с этим.

4. Концепция мемоизации:

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

5.Как работает useMemo?

в официальной документации React подпись useMemo выглядит так:

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

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

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

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

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

и простой способ его использования - обернуть нашу медленную функцию внутри функции useMemo и передать счетчик в массив зависимостей, чтобы медленная функция запускалась только при изменении нашего счетчика.

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

7. Заключение

useMemo может повысить производительность приложения, «кэшируя» дорогостоящие функции и предотвращая их повторный запуск при каждом изменении состояния.

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

Это было разработано мной в eDonec.