Когда мы изучаем React, очень часто начинают изучать самые основные и важные хуки, такие как useState, useEffect, useContext… и т. д., но при погружении мы обнаружили, что оказываемся в ситуациях, когда React повторно отображает компоненты. без необходимости влияет на производительность нашего приложения. Именно в этом сценарии React.memo или useMemo могут быть очень полезны!

React.памятка

Он был выпущен в октябре 2018 года (v.16.6). React.memo — это компонент высокого порядка (H.O.C), который получает два аргумента: компонент (который будет отображаться) и функцию обратного вызова, которую можно передать дополнительно. Эта функция обратного вызова, поскольку она является частью React.memo, автоматически обрабатывает два аргумента: первый эквивалентен предыдущим аргументам, полученным компонентом, а второй эквивалентен получены новые аргументы. Идея этого подхода заключается в том, что вы можете сравнить старые и новые аргументы, переданные в функцию обратного вызова, и только если ваше условие приводит к ложному значению, ваш компонент будет перерисован.

Давайте посмотрим на следующий пример:

Во-первых, у нас есть компонент, который мы хотим запомнить. В данном случае это простая функция, которая умножает число, переданное в качестве аргумента, на два. Затем мы должны обернуть наш компонент React.memo. Он получит в качестве первого аргумента ранее созданный компонент и, необязательно, в качестве второго аргумента функцию обратного вызова, которая будет обрабатывать реквизиты prev и next (вы можете назвать эти реквизиты по своему желанию). Следующим шагом является создание условия, определяющего необходимость повторного рендеринга компонента. На изображении выше мы проверяем, равно ли значение предыдущего аргумента новому аргументу, если оно ложно, компонент будет повторно визуализирован и запомнен с новым значением.

А что произойдет, если мы не передадим необязательный обратный вызов в качестве второго аргумента?

React будет внутренне сравнивать старый и новый реквизит, только если они отличаются, он обновит/повторно отрендерит компонент.

Как это реализовать?

Просто импортируйте свой компонент, как обычно, например: импортируйте MultiplyByTwo из «../../../multyplyByTwo»; и используйте его как обычно:

Когда мы должны использовать React.memo?

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

useMemo

Впервые он был представлен в React в феврале 2019 года (v16.8). useMemo — это хук, который запоминает результат переданной ему функции (вместо компонента вроде React.memo). Первоначально его синтаксис отличается от React.memo, как мы могли видеть на следующем изображении:

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

Анализируя пример, у нас есть компонент под названием ReactComponent (не такое креативное имя, ха-ха), который получает обратный вызов. Этот обратный вызов возвращает итерацию arrayList, которая представляет собой массив, полученный родительским компонентом, который возвращает список абзацев ‹p› (в конце концов, useMemo вернет этот список абзацев). Затем мы видим, что arrayList передается как зависимость от useMemo.

Теперь, в чем смысл использования useMemo в этом случае? useMemo через константу RenderList запомнит этот список абзацев при первом рендеринге, и только когда arrayList, переданный как изменение зависимости, будет пересчитывать и повторно рендерить список абзацев с новыми значениями. Если вы не передадите переменную в качестве зависимости от useMemo, она сохранит значение, рассчитанное при первом рендеринге, и не будет пересчитывать или повторно рендерить компонент, что полезно в случаях, когда у вас есть сложный или потребляющий много памяти код, который просто нужно сделать один раз.

Когда мы должны использовать useMemo?

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

Различия между React.memo и useMemo:

Как мы узнали, React.memo является компонентом высокого порядка (H.O.C), поэтому он всегда будет получать компонент в качестве первого аргумента, запоминать его и использовать его свойства для условного рендеринга. С другой стороны, useMemo — это хук React, который получает callback-функцию, запоминает ее результат и снова выполняет и пересчитывает эту функцию, только если одна из переменных, переданных в массиве зависимостей, изменится. Говоря это, становится ясно, что, несмотря на то, что обе утилиты используют мемоизацию в качестве основного функционала, их цели различны.

Преимущества и недостатки между ними:

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

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

Я очень-очень открыт для получения любых отзывов или улучшений этой статьи ради знаний и передачи правильной информации =)