React事件处理器含异步代码时的批量更新调度机制问询

核心原因：React批量更新的上下文边界 #

React的批量更新不是看整个事件处理器是否执行完毕，而是看代码是否处于React控制的同步执行上下文里：

• 在同步的React事件（比如onClick的同步代码段）中，所有setState会被收集起来，等当前同步代码执行完后统一触发一次渲染。
• 一旦代码进入异步上下文（比如await之后、setTimeout回调、Promise.then里），这部分代码已经脱离了React的同步事件上下文，此时的setState会触发即时渲染（React 18之前），或者被自动批量处理（React 18之后），但都会在调用后尽快执行，不会等到整个事件处理器结束。

你的代码执行流程拆解 #

我们一步步看handleClick的执行过程：

1. 同步阶段（点击后立即执行）：

   • 调用setPending(pending + 1)，此时pending是初始值0，要设置为1。React把这个更新加入批量队列，暂时不渲染。
   • 遇到await delay(3000)，函数暂停执行，此时同步代码已经执行完毕，React的事件上下文结束，于是立刻处理之前收集的批量更新，触发渲染，pending变成1——这就是你看到的“处理器还没执行完就更新pending”的原因，因为await之前的同步部分已经跑完了。

2. 异步阶段（3秒后执行）：

   • Promise resolve后，函数继续执行。这里的pending和completed都是闭包捕获的初始值（0），所以：
     • setPending(pending - 1)会把值设为0 - 1 = -1
     • setCompleted(completed + 1)会把值设为0 + 1 = 1
   • 在React 18之前，这两个setState会触发两次独立的渲染；React 18之后，React会自动批量这两个更新，只触发一次渲染。但不管怎样，这部分更新不会等到整个函数结束，而是在调用后立即处理。

解决闭包问题的方案 #

如果想让后续的更新基于最新的状态值，不要用闭包捕获的旧值，而是使用setState的函数式更新：

async function handleClick() {
  // 函数式更新，基于最新状态计算
  setPending(prev => prev + 1);
  await delay(3000);

  setPending(prev => prev - 1);
  setCompleted(prev => prev + 1);
}

这样每次更新都会拿到最新的状态值，就不会出现pending变成-1的问题了。

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