useEffect 不重新渲染

Question

  const [count, setCount]=useState(0);
  useEffect(()=>{
    console.log("count inside hook is ", count);
  },[count]);
  if(count<10)
    setCount(count+1); // setCount(count=>count+1)

我有这段代码，我期望每个计数都有控制台，但我只能看到 count=10 的控制台日志。

我的理解是，给定一个依赖数组，当其中的对象发生更改时，必须调用 useEffect，但这里不会发生这种情况。有人可以解释为什么会发生这种情况吗？

谢谢！

Answer 1

如果您在渲染期间设置状态，那么它实际上会中止当前渲染。返回后，react 不会将临时更改推送到 dom，也不会运行效果。相反，它以新状态开始新渲染。最终，一旦达到 10，您就停止设置中间渲染状态，最终渲染可以完成并运行其 useEffect。