标准答案
- 批处理更新意味着多次 setState 不一定触发多次渲染，React 会把它们放进同一批处理流程。
- React 18 之前，自动批处理主要发生在 React 事件处理函数中。
- React 18 使用 createRoot 后，Promise、setTimeout、原生事件等场景中的更新也可以自动批处理。
- 批处理会影响读取状态的时机，调用 setState 后不能立刻假设当前变量已经更新。
- 少数必须同步刷新 DOM 的场景可以使用 flushSync，但应谨慎使用。
题目解析
这道题和 state 异步更新、函数式更新关系很近。批处理提升性能，但也要求开发者理解 state 快照。
React 18 的自动批处理让更多异步回调里的多次更新合并，减少了额外渲染。
如果逻辑依赖更新后的 DOM，通常要重新审视设计，而不是默认用 flushSync。
代码示例
下面两次状态更新会被 React 合并处理，通常只触发一次渲染。
TSX
function handleSubmit() {
setLoading(true)
setError('')
}
setTimeout(() => {
setCount(prev => prev + 1)
setFlag(true)
}, 100)常见误区
- 认为每次 setState 都一定立刻触发一次渲染。
- React 18 自动批处理后，仍用旧心智模型判断异步回调里的渲染次数。
- 滥用 flushSync，让 React 无法正常调度更新。