react批量更新、同步/异步更新场景
React 16 到 React 19 期间，批量更新（Batch Update）机制发生了很大变化，尤其是 React 18 引入了自动批量更新（Automatic Batching）。
面试中经常会问：
React16、React17、React18、React19 的批量更新区别？
哪些场景是同步更新？哪些是异步更新？
下面详细讲解。
一、什么是批量更新
先看代码：
const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); setCount(count + 1); setCount(count + 1); }很多人以为：
0 -> 1 1 -> 2 2 -> 3实际：
最终 = 1因为 React 会把多个 state 更新合并：
Batch Update减少：
render() render() render()变成：
render()提高性能。
二、React16/17 批量更新机制
React16 和 React17：
只有 React 控制的事件中才会批量更新
例如：
function App() { const [count, setCount] = useState(0); const click = () => { setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); }; return ( <button onClick={click}> {count} </button> ); }React 会批量更新：
setCount setCount setCount ↓ render 一次更新流程
点击按钮 ↓ 收集更新 ↓ 更新队列 ↓ 统一计算state ↓ render三、React16/17 哪些场景不是批量更新
1 setTimeout
setTimeout(() => { setCount(c => c + 1); setCount(c => c + 1); });React16/17：
render render两次渲染。
因为：
setTimeout 不是 React 管理的事件2 Promise
Promise.resolve().then(() => { setCount(c => c + 1); setCount(c => c + 1); });React16/17：
render render3 原生事件
document.addEventListener( 'click', () => { setCount(c => c + 1); setCount(c => c + 1); } );React16/17：
render renderReact16/17 总结
| 场景 | 是否批量更新 |
|---|---|
| React事件 | ✅ |
| 生命周期函数 | ✅ |
| setTimeout | ❌ |
| Promise | ❌ |
| async/await | ❌ |
| 原生事件 | ❌ |
四、React18/19 自动批量更新
React18 最大变化：
Automatic Batching 自动批量更新只要使用：
createRoot()就开启。
setTimeout
setTimeout(() => { setCount(c => c + 1); setCount(c => c + 1); });React18：
render 一次Promise
Promise.resolve().then(() => { setCount(c => c + 1); setCount(c => c + 1); });React18：
render 一次async await
async function test() { await fetch(); setCount(c => c + 1); setCount(c => c + 1); }React18：
render 一次原生事件
document.addEventListener( 'click', () => { setCount(c => c + 1); setCount(c => c + 1); } );React18：
render 一次React18/19 总结
| 场景 | React16/17 | React18/19 |
|---|---|---|
| React事件 | ✅ | ✅ |
| Promise | ❌ | ✅ |
| setTimeout | ❌ | ✅ |
| async/await | ❌ | ✅ |
| 原生事件 | ❌ | ✅ |
五、同步更新和异步更新
很多面试官喜欢问：
React setState 是同步还是异步？答案：
既不是单纯同步 也不是单纯异步React事件中
const click = () => { setCount(1); console.log(count); }输出：
0因为：
state没有立即更新React先收集更新。
过程
setState ↓ 放入更新队列 ↓ 事件结束 ↓ render ↓ state更新所以表现得像：
异步六、真正同步更新 flushSync
React18：
import { flushSync } from 'react-dom'; flushSync(() => { setCount(1); }); console.log(count);React立即更新。
执行流程
flushSync ↓ 立即render ↓ 立即commit ↓ state更新七、React Fiber中的更新优先级
React16开始引入：
Fiber更新不再是：
同步递归而是：
可中断更新会进入：
Lane优先级队列。
例如：
高优先级
用户输入
<input />中优先级
按钮点击
onClick低优先级
列表渲染
startTransition()startTransition(() => { setList(bigData); });八、React18 Concurrent模式
React18：
const root = createRoot( document.getElementById('root') );开启并发特性。
低优先级更新：
startTransition(() => { setList(data); });高优先级：
setInput(value);React会：
先响应输入 ↓ 再渲染大列表避免页面卡顿。
九、面试标准答案
React16/17
React事件中会批量更新， setTimeout、Promise、 async/await、原生事件中不会批量更新。React18/19
引入Automatic Batching， React事件、Promise、 setTimeout、async/await、 原生事件都会自动批量更新。setState同步还是异步
本质上是同步创建Update对象， 异步执行render和commit。 因此表现为异步。强制同步更新
flushSync(() => { setState(...) });React18新特性
自动批量更新（Automatic Batching）
并发渲染（Concurrent Rendering）
startTransition
Suspense增强
Lane优先级调度
这套内容基本覆盖了 React 16 → React 19 关于批量更新、同步/异步更新、Fiber 调度和面试高频考点。