为什么 React useState 钩子在 for 循环中不起作用？

Question

我很好奇为什么在 for 循环中设置状态不能按预期工作。

这是我使用钩子的代码。

const [count, setCount] = useState(0);

  const onButtonPress = () => {
    for(let i=0; i<100; i++){
      setCount(i);
    }
  }

  useEffect(()=> {
    console.log('useEffect called');
    console.log(count);
  },[count])

我在单击按钮时调用 onButtonPress 函数。

我期望的行为：计数状态应该更新 100 次，因此调用 useEffect 挂钩 a 100 次。

实际行为：useEffect 挂钩仅在循环的最后一次迭代后被调用一次。

我知道官方的 react 文档说 hooks 不应该在循环中使用，但是他们的解释不是很清楚。

我想了解为什么在循环中调用 setCount 不起作用。

注意：我知道还有其他方法可以达到预期的结果，但我想了解为什么不会多次调用 setCount。

Answer 1

状态更新由 react 批处理，因此如果您在处理程序中多次调用同一个状态更新程序，整个操作将被批处理并执行单个更新就是你所见证的

另外，当文档说钩子不应该在循环中使用时，它们的意思是 useState, useRef, useEffect and so on 之类的钩子，而不是 useState 钩子

返回的状态更新器

Answer 2

React 分批调度状态更改，当运行一个 for 循环时，它快速批处理 100 个请求，导致只有 1 次状态更新，最终 1 次重新渲染。如果您使用 0ms 的 setTimeout 事件，您可以获得所需的，但我不完全确定您的用例。

为什么 React useState 钩子在 for 循环中不起作用？

Why doesn't the React useState hook work in a for loop?

reactjs

react-hooks

use-state