React setState/useState 更新是同步还是异步？

简化版

React 状态更新不是简单同步赋值。调用 setState 会入队更新，React 会批量处理并触发重新渲染。在同一事件中多次更新会被合并；需要基于旧值更新时，应使用函数式更新。

错误写法：

setCount(count + 1);
setCount(count + 1);

如果当前 render 中 count 是 0，两次都计算成 1，最终可能只加 1。

正确写法：

setCount(c => c + 1);
setCount(c => c + 1);

函数式更新会基于队列中的最新状态依次计算。

使用 createRoot 的 React 18+ 应用自动批处理范围更大，Promise、setTimeout、原生事件中的多个更新通常也会被批处理。

函数组件执行时，count 是当前这次 render 的状态快照。你调用 setCount 不会立刻改变当前闭包里的 count 变量，而是告诉 React 下次 render 用新状态。

所以在同一个事件回调里，连续读 count 读到的仍然是这次 render 的值。

如果每次 setState 都立刻 render，连续更新多个状态会导致多次重复渲染。React 会把同一批更新合并，最后统一渲染一次。

这就是为什么 setState 更像“提交更新请求”，不是“立即赋值语句”。

当新状态依赖旧状态时，用函数式更新：

setCount(prev => prev + 1);

这样 React 会按更新队列顺序把上一次计算结果传给下一次，避免闭包快照带来的旧值问题。函数式更新不是“更异步”，它只是把新值的计算推迟到 React 处理队列时，并接收队列中的最新中间结果。updater 必须保持纯净，因为 Render 可能重试它。

prev=0 → updater1 返回 1
prev=1 → updater2 返回 2
prev=2 → updater3 返回 3

常见追问是“如何在状态更新后读取最新 DOM”。状态更新触发渲染，DOM 提交后才能读最新结果。如果必须同步读取，可以考虑 useLayoutEffect；少数场景可用 flushSync 强制同步刷新，但不要滥用。

还会问“对象 state 更新会不会自动合并”。函数组件 useState 不会像 class 的 this.setState 那样浅合并对象，你需要自己展开：

setForm(prev => ({ ...prev, name: 'Tom' }));

工程里复杂状态可以用 useReducer，避免多个 setState 分散更新导致逻辑难追。

传值更新可以理解为“把结果替换成某个值”，函数式更新则是“用队列当前结果继续计算”。下一轮 Render 依次处理队列，所以二者混合时顺序非常重要，不能简单说“多次 setState 都会合并成最后一次”。

事件处理器运行：读取的是本轮 snapshot → 多个更新进入队列
事件处理器结束：React 处理队列 → Render 新 snapshot → Commit

Updater 会在 Render 阶段执行，因此必须是纯函数。在 StrictMode 开发环境中，React 可能额外调用 updater 来暴露不纯逻辑；不能在 updater 中发送请求、修改外部数组或再次产生副作用。

使用 createRoot 的 React 18+ 应用会对 Promise、定时器、原生事件等来源中的多次更新进行更广泛的自动批处理。批处理不会跨越两个独立的有意用户事件，把两次点击永远揉成一次；React 仍保证必要的事件边界，例如第一次提交禁用按钮后下一次点击看到新界面。

极少数必须立即让第三方浏览器 API 读取新 DOM 的集成可以用 flushSync，但它会强制同步刷新，可能提前执行待处理 effect、暴露 Suspense fallback，并破坏调度收益。多数“更新后做事”应通过下一次 render 的数据流、ref 或合适的 effect 表达。

记忆主线：state 属于某次 Render 的快照，setter 提交队列；批处理决定何时算，updater 决定怎么算。

误区：setState 是异步 Promise。 setter 不返回可 await 的 Promise；“异步”只是描述入队和提交时机，不是其类型。
误区：连续多次 setState 永远只保留最后一次。 函数 updater 会按队列顺序累计，替换更新和 updater 混合时也按顺序计算。
误区：调用 setter 后当前变量会立即改变。 当前事件闭包持有本轮 snapshot，新值只会出现在后续 Render。
追问：为什么三次 setCount(count+1) 只加一？ 三次读取的 count 都来自同一快照，提交的是相同替换值。
追问：React 18 自动批处理覆盖哪些来源？ 在 createRoot 下，React 事件、Promise、定时器和原生事件等更新通常都可批处理。
追问：对象 state 为什么不会自动浅合并？ useState 采用替换语义，只有类组件 this.setState 保留对象浅合并行为。
追问：什么时候允许 flushSync？ 仅在必须同步满足浏览器或第三方 API 的 DOM 契约时谨慎使用，并测量阻塞代价。

React 状态更新记成“入队、批处理、下次 render 生效”。依赖旧值用函数式更新，对象更新自己合并，别把 setState 当同步赋值。

快照解释为什么当前闭包不变，队列顺序解释为什么替换更新与 updater 会得到不同结果。