为什么 React useState 钩子不能在 for 循环中工作？答案

【问题标题】：Why doesn't the React useState hook work in a for loop?为什么 React useState 钩子不能在 for 循环中工作？
【发布时间】：2020-09-06 22:03:16
【问题描述】：

我很好奇为什么在 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 挂钩 100 次。

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

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

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

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

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

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

【讨论】：

setTimeout 确实有助于我的用例。感谢那。为什么当我们使用 0ms 的 setTimeout 时对状态变化不反应批处理？
setTimeout 是浏览器给出的异步回调，它从javascript的调用堆栈中出来并注入到回调队列中，整个过程称为事件循环。请观看此video，稍后您可以感谢我：p

【解决方案2】：

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

此外，当文档说钩子不应在循环中使用时，它们是指诸如 useState, useRef, useEffect and so on 之类的钩子，而不是 useState 钩子返回的状态更新程序

【讨论】：