Использование useMemo вместо синтаксической проблемы React.memo - PullRequest
Новая
       6

Использование useMemo вместо синтаксической проблемы React.memo

1 голос
/ 02 апреля 2019

Мне нужно сделать демонстрацию использования React Hooks useMemo.У меня есть следующий рабочий код, который делает то, что я хочу: 

const SpeakerCardDetail = React.memo(
  ({id,...

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

Это так далеко, как я получил: 

const SpeakerDetail = React.useMemo(() => {
   ({ id,

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

1 Ответ

2 голосов
/ 02 апреля 2019

React.memo и React.useMemo совсем не эквивалентны (не полагайтесь на схожесть имен).Вот цитата из React.memo doc :

React.memo - это компонент высшего порядка .

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

React.useMemo с другой стороны, является более общим и возвращает запомненное значение :

Передать функцию «create» и массив зависимостей.useMemo будет только пересчитывать запомненное значение, когда одна из зависимостей (a или b) изменилась. 

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b), 
  [a, b]
);

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

И вот это предупреждение:

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

...