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钩子调用100次。

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

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

我想了解为什么在循环中调用setCount无效。

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

Answer 1

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

此外，当文档说不应该在循环中使用这些钩子时，它们的意思是像useState, useRef, useEffect and so on这样的钩子，而不是useState钩子返回的状态更新器

Answer 2

React批量分派状态更改，在运行for循环时，它将快速分批处理100个请求，从而仅更新1个状态，最终重新渲染1个。如果您将setTimeout事件与0ms一起使用，则可以获取必需的事件，但我不确定您的用例。

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

2 个答案: