javascript - useEffect(fn, []) 中包装的代码与 useEffect(fn, []) 外部的代码有什么区别？

Question

新的 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);
};

Answer 1

在第二种情况下，代码将在每次重新渲染时执行。

这是该组件的更好版本:

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

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

在这种情况下，仅当 num 属性发生更改时才会使用效果(很大程度上取决于 num)。

供引用: https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

无论如何，在我看来，在这个非常简单的情况下使用副作用是多余的!通过在每次渲染时检查 num > 0 ，代码的运行速度会比先检查 num 是否更改，然后再检查它是否 > 0 更快。因此，您可能应该避免 useEffect 并坚持使用第二段代码