React2026-07-12阅读约 8 分钟

React 18 并发能力梳理

从自动批处理、Transition 到 Suspense 的协作关系,梳理 React 18 在交互流畅度上的核心提升。

并发渲染性能优化前端架构

React 18 的并发能力并不是一个单独的 API,而是一组围绕“可中断渲染”的机制。它让 React 在渲染过程中可以暂停、恢复甚至丢弃某些更新,从而把有限的主线程时间优先分配给用户能直接感知的交互。

自动批处理把同一事件循环内的多次状态更新合并为一次渲染。相比 React 17 只在事件回调里批处理,18 版本把 Promise、setTimeout 和原生事件中的更新也纳入进来,减少了不必要的重复渲染。

startTransition 用来标记“非紧急”更新,例如搜索结果列表的重算。它的意义在于把紧急更新(输入框回显)和非紧急更新(列表刷新)区分开,让输入始终保持跟手。

Suspense 在并发模式下承担了加载边界的角色,配合流式渲染可以先展示已经就绪的部分。理解这三者的协作关系,是用好 React 18 的关键前提。