如果 useEffect 没有第二个参数或者一个参数等于 null 或未定义，会发生什么情况？

Question

我只是想知道useEffect如果我们传递第二个参数作为null或undefined代替依赖项数组，将会如何表现。它会在每个周期渲染吗？还是只一次？任何线索将不胜感激。

Answer 1

如果您创建一个useEffect没有第二个参数或一个等于undefined或 的null参数，是的，回调将在每次渲染时执行。如果您明确输入undefinedornull作为第二个参数，并且编辑器中有 Eslint，您将收到此警告：

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies. (react-hooks/exhaustive-deps)

在像下面这样的情况下，如果您不在回调内部进行变异，这对您的应用程序没有任何损害state，它只会在每次渲染时记录“Hello Word”。

export default function App() {
  const [state, setState]= useState(true);
  useEffect(() => {
    console.log("Hello Word");
  });
  return (
    <div>
      <button onClick = {()=>setState(!state)}>Toggle State</button>
    </div>
  );
}

state在下面这样的情况下，您在回调内部改变a ，这将导致渲染无限循环。这是因为状态更改会触发渲染，并且回调会在每次渲染上执行。

export default function App() {
  const [state, setState]= useState(true);
  useEffect(() => {
   setState(!state);
  });
  return (
    <div>
      <button onClick = {()=>setState(!state)}>Toggle State</button>
    </div>
  );
}

为了涵盖所有用例，有一个将空依赖项数组作为第二个参数的用例，其中回调仅在第一次渲染时执行：

export default function App() {
  const [state, setState]= useState(true);
  useEffect(() => {
   setState(!state);
  },[]);
  return (
    <div>
      <button onClick = {()=>setState(!state)}>Toggle State</button>
    </div>
  );
}

state最后，在第一次渲染时以及每次依赖项数组中的某些变化时调用回调的函数：

export default function App() {
  const [state, setState]= useState(true);
  useEffect(() => {
   console.log("Hello Word");
   // setState(!state); if you mutate state here, it will cause an infinite loop of renders
  },[state]);
  return (
    <div>
      <button onClick = {()=>setState(!state)}>Toggle State</button>
    </div>
  );
}