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
render
3 原生事件
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
自动批量更新
只要使用：
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 调度和面试高频考点。
到此这篇关于react批量更新、同步/异步更新场景的文章就介绍到这了,更多相关react批量更新、同步/异步更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！