Question

新的 React Hooks 功能很酷，但有时会让我感到困惑。特别是，我将这段代码包装在useEffect钩子中：

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 prop更改时才使用效果（很大程度上取决于 num ）。

供参考： https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

无论如何，在我看来，在这种非常简单的情况下使用副作用太过分了！通过检查每个渲染处的num > 0是否比首先检查num是否更改，然后检查它是否大于0，将使代码运行更快。因此，您应该避免使用useEffect并坚持第二段代码

在useEffect（fn，[]）中包装的代码与useEffect（fn，[]）外部的代码之间有什么区别？

1 个答案: