React事件处理器执行完才更新状态？示例代码为何表现不符？

你提到的“事件处理器运行期间状态就更新了”其实是个误解，React的状态更新机制并没有被打破，核心原因如下：

1. 函数组件状态变量的快照特性 #

在函数组件中，每次渲染生成的count是一个固定的快照值。调用setCount后，并不会立即修改当前事件处理器作用域里的count变量——当前作用域内的count始终是调用setCount前的旧值（也就是0）。

你可以做个简单验证：在for循环中加入console.log(count)，或者在事件处理器末尾打印count，输出的都会是0，直到事件处理器完全执行完毕，组件重新渲染后，新的count（1）才会出现在页面上。

2. setCount的回调执行时机 #

你使用的setCount((prev) => prev + 1)这种回调形式，回调函数并不会在调用setCount时立即执行。它会被React放入更新队列，等到当前事件处理器的所有同步代码执行完成后，才会被调用计算新状态，之后再触发组件的重新渲染。

比如修改你的代码：

const eventHandler = () => {
  setCount((prev) => {
    console.log('setCount回调执行:', prev); // 此打印会在事件处理器结束后出现
    return prev + 1;
  });

  for (let i = 0; i < 1000; i++) {
    if (i === 500) console.log('循环中的count:', count); // 输出0
  }

  console.log('事件处理器执行完毕:', count); // 输出0
};

运行后会发现，setCount回调执行的打印顺序在最后，这直接证明了状态更新的相关逻辑是在事件处理器完成后才启动的。

3. 页面渲染的时机 #

React的批量更新机制会把事件处理器中的所有状态更新合并，等到当前宏任务（也就是整个事件处理器的执行）结束后，才会触发组件的重新渲染。你的for循环是同步代码，会阻塞事件循环，所以页面上的count显示更新，必然是在for循环和console.log('end')执行完成之后才会发生。

结论：状态并没有在事件处理器运行期间更新，你看到的表象只是对React状态快照和更新队列机制的误解。

内容的提问来源于stack exchange，提问作者Akhil Rana