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 render

3 原生事件

document.addEventListener( 'click', () => { setCount(c => c + 1); setCount(c => c + 1); } );

React16/17：

render render

React16/17 总结

四、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 总结

五、同步更新和异步更新

很多面试官喜欢问：

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 调度和面试高频考点。