javascript - 没有第二个参数或一个等于 null 或 undefined 的 useEffect 会发生什么？

Question

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

Answer 1

如果您创建一个 useEffect没有第二个参数或一个等于 undefined或 null ，是的，回调将在每次渲染时执行。如果您明确输入了 undefined或 null作为第二个参数，如果你的编辑器中有 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 的情况下，它会导致渲染的无限循环。在回调里面。这是因为状态更改会触发渲染，并且回调会在每次渲染时执行。

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在 dependencies 数组中更改:

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