React异步事件处理函数为何状态更新慢于非异步函数？

先拆解两个函数的核心差异：

1. 异步函数版本

const handleClick = async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  setCount(count + 1);
};  

点击按钮后，await会暂停函数执行3秒。此时函数已经通过闭包捕获了当前的count值，3秒后执行setCount(count + 1)时，用的还是3秒前的旧值。如果这3秒内多次点击，每次点击都会捕获当时的旧count，最终状态只会基于同一个旧值更新，导致点击次数和状态不同步。

换成setCount((count) => count + 1)就能解决，因为这种函数式更新会直接取用React内部最新的状态值计算，不受闭包捕获的旧值影响。

2. 普通函数版本

const handleClick = () => {
  setTimeout(() => console.log('hello'), 3000);
  setCount(count + 1);
};  

这个函数里，setCount(count + 1)是同步执行的——点击按钮后立刻捕获当前最新的count值并触发状态更新，后面的setTimeout只是异步执行日志输出，完全不影响前面的状态更新逻辑。哪怕快速点击，每次都能同步拿到当时的最新count，状态自然和点击次数同步。

关于你提到的React批处理：
批处理是把多个状态更新合并成一次渲染，但这不是核心差异的原因。异步函数中await之后的代码已经脱离了原事件处理的同步上下文，即便React18支持异步场景的自动批处理，也改变不了闭包捕获旧状态的问题——这才是状态更新不同步的根本，和批处理是否等待无关。

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