Каковы различия между кодом, заключенным в useEffect (fn, []), и кодом вне useEffect (fn, [])? - PullRequest
Новая
       3

Каковы различия между кодом, заключенным в useEffect (fn, []), и кодом вне useEffect (fn, [])?

0 голосов
/ 04 июля 2019

Новая функция React Hooks - это круто, но иногда меня смущает. В частности, у меня есть этот код, завернутый в useEffect hook: 

const compA = ({ num }) => {
  const [isPositive, check] = useState(false);
  useEffect(() => {
    if (num > 0) check(true); 
  }, []);

  return (//...JSX);
};

Код внутри useEffect будет выполнен только один раз. Так в чем же разница, если я выведу код из useEffect, как показано ниже: 

const compA = ({ num }) => {
  const [isPositive, check] = useState(false);

  if (num > 0) check(true);

  return (//...JSX);
};

1 Ответ

2 голосов
/ 04 июля 2019

во втором случае код будет выполняться при каждом повторном рендеринге.

это лучшая версия компонента: 

const compA = ({ num }) => {
  const [isPositive, check] = useState(false);
  useEffect(() => {
    if (num > 0) check(true); 
  }, [num]);

  return (//...JSX);
};

В этом случае эффект (который зависит для справки: https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Во всяком случае, на мой взгляд, использование побочного эффекта в этом оченьпростой случай излишний!Код будет выполняться быстрее, проверяя, будет ли num > 0 при каждом рендеринге, чем сначала проверять, изменилось ли num, а затем, если оно> 0 .. Так что вам, вероятно, следует просто избегать useEffect и придерживаться своего второго фрагмента кода

...