React Hooks - где разместить логику, чтобы процесс передавал реквизиты только один раз? - PullRequest
Новая
       2

React Hooks - где разместить логику, чтобы процесс передавал реквизиты только один раз?

0 голосов
/ 10 мая 2019

Иногда компонент должен обрабатывать пропущенные реквизиты и сохранять их в state.Так как обработка может быть тяжелой, это хорошо сделать только один раз.Перед хуками это обычно делается в constructor или componentDidMount.

Теперь, зайдя в ловушку, это может быть достигнуто с помощью useEffect, передавая [] в качестве второго параметра для запуска только один раз, но я чувствую, что это не лучшее место - мы занимаемся обработкой реквизита исохранить в состоянии, которое не является побочным эффектом .Из документов: «Выборка данных, настройка подписки и ручное изменение DOM в компонентах React - все это примеры побочных эффектов».Не думайте, что предварительная обработка относится к какому-либо из них.

Так, где лучшее место, чтобы сделать это с крючками?

1 Ответ

2 голосов
/ 10 мая 2019 
import React, {useMemo} from 'react';

const someExpensiveFunction = (a, b) => {
  // expensive stuff happens here
}

const someFunctionalComponent = ({ prop1, prop2 }) => {
  const someVariableDependentOnProps = useMemo(() => someExpensiveFunction(prop1, prop2), [prop1, prop2]);
  return <div>{someVariableDependentOnProps}</div>
}

Согласно документам:

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

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

...