react批量更新、同步/异步更新场景

React 16 到 React 19 期间，批量更新（Batch Update）机制发生了很大变化 ，尤其是 React 18 引入了 自动批量更新（Automatic Batching） 。

面试中经常会问：

React16、React17、React18、React19 的批量更新区别？

哪些场景是同步更新？哪些是异步更新？

下面详细讲解。

一、什么是批量更新

先看代码：

scss 复制代码

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

很多人以为：

rust 复制代码

0 -> 1
1 -> 2
2 -> 3

实际：

复制代码

最终 = 1

因为 React 会把多个 state 更新合并：

sql 复制代码

Batch Update

减少：

scss 复制代码

render()
render()
render()

变成：

scss 复制代码

render()

提高性能。

二、React16/17 批量更新机制

React16 和 React17：

只有 React 控制的事件中才会批量更新

例如：

ini 复制代码

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 一次

更新流程

perl 复制代码

点击按钮

↓

收集更新

↓

更新队列

↓

统一计算state

↓

render

三、React16/17 哪些场景不是批量更新

1 setTimeout

ini 复制代码

setTimeout(() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
});

React16/17：

复制代码

render
render

两次渲染。

因为：

arduino 复制代码

setTimeout
不是 React 管理的事件

2 Promise

ini 复制代码

Promise.resolve().then(() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
});

React16/17：

复制代码

render
render

3 原生事件

ini 复制代码

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

React16/17：

复制代码

render
render

React16/17 总结

场景	是否批量更新
React事件	✅
生命周期函数	✅
setTimeout	❌
Promise	❌
async/await	❌
原生事件	❌

四、React18/19 自动批量更新

React18 最大变化：

复制代码

Automatic Batching
自动批量更新

只要使用：

scss 复制代码

createRoot()

就开启。

setTimeout

ini 复制代码

setTimeout(() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
});

React18：

复制代码

render 一次

Promise

ini 复制代码

Promise.resolve().then(() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
});

React18：

复制代码

render 一次

async await

scss 复制代码

async function test() {
  await fetch();

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

React18：

复制代码

render 一次

原生事件

ini 复制代码

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事件中

ini 复制代码

const click = () => {
  setCount(1);

  console.log(count);
}

输出：

复制代码

因为：

perl 复制代码

state没有立即更新

React先收集更新。

过程

perl 复制代码

setState

↓

放入更新队列

↓

事件结束

↓

render

↓

state更新

所以表现得像：

复制代码

异步

六、真正同步更新 flushSync

React18：

javascript 复制代码

import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(1);
});

console.log(count);

React立即更新。

执行流程

perl 复制代码

flushSync

↓

立即render

↓

立即commit

↓

state更新

七、React Fiber中的更新优先级

React16开始引入：

php 复制代码

Fiber

更新不再是：

复制代码

同步递归

而是：

复制代码

可中断

更新会进入：

复制代码

Lane

优先级队列。

例如：

高优先级

用户输入

css 复制代码

<input />

中优先级

按钮点击

复制代码

onClick

低优先级

列表渲染

scss 复制代码

startTransition()

scss 复制代码

startTransition(() => {
  setList(bigData);
});

八、React18 Concurrent模式

React18：

ini 复制代码

const root = createRoot(
  document.getElementById('root')
);

开启并发特性。

低优先级更新：

scss 复制代码

startTransition(() => {
  setList(data);
});

高优先级：

scss 复制代码

setInput(value);

React会：

复制代码

先响应输入

↓

再渲染大列表

避免页面卡顿。

九、面试标准答案

React16/17

javascript 复制代码

React事件中会批量更新，
setTimeout、Promise、
async/await、原生事件中不会批量更新。

React18/19

javascript 复制代码

引入Automatic Batching，
React事件、Promise、
setTimeout、async/await、
原生事件都会自动批量更新。

setState同步还是异步

sql 复制代码

本质上是同步创建Update对象，
异步执行render和commit。

因此表现为异步。

强制同步更新

scss 复制代码

flushSync(() => {
  setState(...)
});

React18新特性

自动批量更新（Automatic Batching）
并发渲染（Concurrent Rendering）
startTransition
Suspense增强
Lane优先级调度

这套内容基本覆盖了 React 16 → React 19 关于批量更新、同步/异步更新、Fiber 调度和面试高频考点。