Skip to main content

第 29 章：从 18 到 19——并发渲染的演进

前面 28 章都在讲"19 长什么样"。本章退一步，看它怎么变成这样的：从 React 16 埋下 Fiber，到 18 把并发做成默认，再到 19 把并发体验收敛。演进的主线只有一条：并发能力从"需要你理解的 API"走向"框架默认替你做好"。

先记住这一句：演进分三步：16 埋地基（Fiber）、18 做默认（createRoot 并发）、19 做收敛（use 统一挂起、Actions 内建异步、Compiler 自动 memo）。每步都在减少你要手动操心的事。

一图流：演进时间线​

16：埋下可中断的地基​

React 16（2017）重写核心为 Fiber 架构（第 3 章的主角）：渲染变成可中断的工作单元，双缓冲让"算一半能丢"成为可能。但这一代，并发渲染还没对开发者开放，Suspense 只用于代码分割。地基打好了，路还没修。

18：并发成为默认​

React 18（2022）是分水岭：createRoot 成为唯一入口，并发渲染默认开启（第 23 章那套"时间片 + 可中断 + 高优插队"对每个应用生效）。同时开放了一批"显式用并发"的 API：useTransition、useDeferredValue（第 27 章）、useSyncExternalStore、自动批处理。

但 18 的姿势是"并发已经在了，但你要主动用"：想不卡输入框，你得记得包 useTransition；想让外部 store 兼容并发，得用 useSyncExternalStore。并发能力是给你的工具箱，不是替你装好的抽屉。

19：并发体验收敛​

React 19（2024）做了三件收敛，核心都是"少操心"：

  1. use 统一挂起（第 26 章）：渲染里读 promise 直接 use，Suspense 边界大量被优化掉，不用到处手动 <Suspense>。
  2. Actions 内建异步状态（第 31 章）：useActionState、useOptimistic、useFormStatus 把"异步提交 + 加载态 + 乐观更新"变成内置 hook，不用自己写 useEffect 管理。
  3. Compiler 自动 memo（第 24 章）：构建期自动加 memo，连 useMemo/useCallback 都不用手写了。

同时把历史包袱清掉：ReactDOM.render 移除、forwardRef 退休（ref 进 props）、字符串 ref 删除。19.1 稳定了 useActionState/useOptimistic，19.2 稳定了 <Activity>（第 28 章）和 useEffectEvent（第 16 章）。

演进本质：从"库"到"框架"​

回头看你学过的每一章，都在这条线上：

  • 第 23 章并发：18 教你"可中断"，19 让"中断后自动恢复"成为默认体验。
  • 第 26 章 Suspense：18 要手动 <Suspense>，19 用 use 让边界变透明。
  • 第 27 章降级更新：18 让你记得用，19 的 Compiler 和 Actions 帮你判断。
  • 第 28 章隐藏状态：18 是实验 API，19.2 稳定成 <Activity>。

一句话：React 在把"并发"从你必须理解的概念，变成你不用想的默认行为。这也意味着读这本书时，越靠后的机制越"藏在框架里"。但藏起来不等于消失，本书记住的每一层，都是这些默认行为的地基。

动手实验​

  1. 看默认并发：一个 React 19 项目里，什么都不用写，跑第 4 章的 Counter，在 workLoopConcurrent 打断点，确认并发渲染就是默认路径。
  2. 对比 18 写法：把第 27 章的 useTransition 写法改成 18 时代最朴素的写法，体会 19 的收敛。
  3. 找历史包袱：在 19 里试 ReactDOM.render、forwardRef，看控制台的报错/警告，感受版本演进的态度。

小结​

  • 16 埋地基（Fiber 可中断），18 做默认（createRoot 并发），19 做收敛（use / Actions / Compiler）。
  • 演进主线：并发从"要你理解的 API"变成"默认替你做好"。
  • 19.1 稳定 useActionState/useOptimistic，19.2 稳定 Activity/useEffectEvent。
  • 每一章学到的机制，都是这些默认行为的地基。
  • 第六部分到此收尾。下一步第七部分：React 19 的新世界（RSC、Actions、Metadata）。