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

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

到此这篇关于react批量更新、同步/异步更新场景的文章就介绍到这了,更多相关react批量更新、同步/异步更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论