React hooks: не так ли обычно нужен useCallback? - PullRequest
Новая
       91

React hooks: не так ли обычно нужен useCallback?

1 голос
/ 30 октября 2019

Я недавно рефакторинг веб-приложения с использованием React Hooks. Я столкнулся с проблемой, касающейся useCallback. Основываясь на описании Kent: https://kentcdodds.com/blog/usememo-and-usecallback, useCallback должен передавать идентичные ссылки на функции для подкомпонентов, чтобы избежать повторного рендеринга подкомпонентов, чтобы производительность была лучше. Тем не менее, он используется вместе с React.memo. И, как сказал Кент:

БОЛЬШЕ ВРЕМЕНИ ВЫ НЕ ДОЛЖНЫ ИМЕТЬ ОПТИМИЗАЦИЮ НЕОБХОДИМЫХ ПОСЕТИТЕЛЕЙ. Реакция ОЧЕНЬ быстрая, и я могу думать о многих вещах, которые вы могли бы сделать со своим временем, что было бы лучше, чем оптимизировать подобные вещи. На самом деле, необходимость оптимизировать вещи с помощью того, что я собираюсь вам показать, настолько редка, что мне буквально никогда не нужно было это делать ...

Итак, мой вопрос:Право утверждать, что нам не нужно использовать useCallback обычно? кроме случаев, когда обратный вызов дорогостоящий, использование useCallback позволяет избежать повторного создания обратного вызова для каждого рендера.

Скажем, для обработчика событий onClick или onChange, 2 строки или меньше, мы просто не будем использовать useCallback для его переноса?

1 Ответ

1 голос
/ 30 октября 2019

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

Пример:

В приведенном ниже примере Child1 всегда будет повторным рендерингом при повторном рендеринге Parent, потому что parentMethod1 будет получать новую ссылку при каждом рендеринге. И Child2 не выполнит повторную визуализацию, поскольку parentMethod2 сохранит свою ссылку при визуализации (вы можете передать массив зависимостей, чтобы изменить его и создать заново при появлении новых входных значений).

Примечание: Предполагается, что компоненты Child запоминаются с помощью React.memo()

function Parent() {
  const parentMethod1 = () => DO SOMETHING;
  const parentMethod2 = useCallback(() => DO SOMETHING,[]);
  return(
    <React.Fragment>
    <Child1
      propA=parentMethod1
    />
    <Child2
      propA=parentMethod2
    />
    </React.Fragment>
  );
}

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

https://reactjs.org/docs/hooks-reference.html#usecallback

useCallback

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

useMemo

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

...