React架构演变

这篇文章主要概括性的讲一下 React 架构演进历史，细节部分在之后的系列文章中都会详细讲到。

1. React 核心架构

Plain 复制代码

React 核心（核心算法、调度、Hooks 等）
       ↓
Reconciler（协调器）
       ↓
Renderer（不同平台的渲染器，比如 ReactDOM / React Native 等）

React 的设计核心（设计哲学）是：

声明式 UI + 虚拟 DOM
组件化与状态驱动渲染
单向数据流
高性能调度与渲染执行模型

2. React16 之前的架构问题

旧架构在 React 16 之前大致称为 **Stack Reconciler（基于 JS 递归的树遍历实现）**。

2.1 栈式递归的问题

旧架构使用递归调用去遍历组件树：

React 在一次更新过程中会一路递归到底。
这个过程是 不可中断的，没有优先级和中断机制。
更新任务一旦开始就不能让出控制权。

导致两类主要瓶颈：CPU 瓶颈和 IO 瓶颈。

2.2 CPU 瓶颈（UI 卡顿）

当一个 large update（例如大量组件渲染、深层组件树更新）进入执行：

JS 线程运行时间可能超过单帧渲染预算（约 16ms/帧）。
阻塞主线程 → 导致 UI 卡顿、掉帧、输入迟滞等体验问题。

2.3 IO 瓶颈（网络/异步等待感知）

在发起数据请求时：

旧架构无法优雅处理异步数据加载的中断/等待；
需要自己写大量状态管理逻辑（加载中、错误、更新顺序等）。

React 16 引入了 <Suspense> 组件，主要用于使用 React.lazy() 进行代码分割，允许开发者在等待动态组件加载时显示备用 UI。即使使用 Suspense 也只能是语法糖，内部仍然是同步渲染模型，没有真正的优先级控制。

3. React16 引入的 Fiber 架构：解决 CPU & IO 瓶颈

React16 最大的变革是引入了 Fiber 架构与 Scheduler 调度器。

3.1 Fiber 是什么？

Fiber 是一种新的内部数据结构：

它代表一个 **工作单元（unit of work）**。
每个组件在 React 内部都有一个对应的 Fiber 节点。
Fiber 形成一棵链式结构（child 子节点, sibling 兄弟节点, return 父节点指针关系），而非简单的递归栈调用。

Fiber 让 React 可以：

拆分更新任务
可中断执行
优先级调度
恢复中断 (resume work)

这是 React 能够支持 Concurrent Rendering（并发渲染） 的基础。

4. Scheduler（调度器）：CPU 优化核心

Fiber 本身是一种数据结构，而真正能让任务 不阻塞且优先级执行 的是 Scheduler。

Scheduler 的职责：

打断大任务 → 避免阻塞主线程
优先级排序 → 及时执行用户交互类更新（输入、点击）
时间切片(Time Slicing) → 把工作拆到多个帧执行

4.1 时间切片 (Time Slicing)

React 在 render 阶段：

Plain 复制代码

while(workInProgressFiber) {
   performUnitOfWork(fiberNode)
   if (时间片结束 → 主线程还有工作要响应) {
      yield control back to browser
   }
}

这样，长更新不会一次性吃掉主线程。

5. React18 并发渲染 & 优先级

React18 引入了完整的 Concurrent Rendering 并发渲染。

5.1 更新优先级（Lanes）

React 中的更新被分配不同的 lane：

Sync Lane：用户交互等高优先级
Default Lane：普通更新
Idle Lane：后台任务

Scheduler 会先将高优先级任务交给 Reconciler，再做低优先级。

5.2 Suspense & Deferred UI（解决 IO 瓶颈）

React v18 之后的 Suspense 可以声明性地处理异步数据：

JavaScript 复制代码

<Suspense fallback={<Spinner />}>
  <MyAsyncComponent />
</Suspense>

React 会暂停渲染某些部分，优先处理更重要的部分。

Suspense 已完全集成并发特性，是一个稳定、可用于生产环境的数据获取、流式服务器渲染和其他异步任务的解决方案。

6. React 19 的架构增强（编译器 + Actions）

因为现在面试基本上都会问一些最新版本的更新，所以这里也提一嘴。

React19 保留 Fiber + Scheduler 的底层架构，但在此基础上加入了如下重要增强：

6.1 Actions & 异步状态处理

React 19 引入了 Actions API ，这不是新的执行模型，而是对异步更新场景的 更高层封装：

JavaScript 复制代码

await someAsyncFunction();
startTransition(() => {
  setPage('/about');
});

它自动处理：

挂起状态
错误处理
乐观更新

相比以前需要手动管理状态，极大简化了异步更新流程。

6.2 新的 `use` API

React19 增加了一个类似 Suspense 与 async 协作的 API：

JavaScript 复制代码

const data = use(fetchPromise)

React 会 在渲染期间自动挂起直到 Promise 解决。使得异步资源的处理更简洁。

6.3 Compiler：自动优化替代 useMemo / useCallback / React.memo

React19 中，我们终于不用考虑 useMemo / useCallback / React.memo 了，React 编辑器内部会自动帮我们做优化，我们只需要写好逻辑代码就可以。记得字节内部有个规定：没有明确优化情况下不要使用 useMemo / useCallback，因为你永远不知道你的代码逻辑和 useXxx 执行内部逻辑哪个更耗费性能。

React19 的内部编译器会自动识别何时需要缓存渲染逻辑，减少手写优化代码。

React 优化总算跟进了 Vue3 中细颗粒度且自动的编译优化，或者说，甚至完全自动，直接反超了？！

6.4 SSR 与 Server Actions 的支持

React19 加强了 React Server Components：

支持服务器上执行数据获取逻辑；
更快的静态生成、流式 HTML；
异步渲染更贴近 IO 优化。

1. React 核心架构

2. React16 之前的架构问题

2.1 栈式递归的问题

2.2 CPU 瓶颈（UI 卡顿）

2.3 IO 瓶颈（网络/异步等待感知）

3. React16 引入的 Fiber 架构：解决 CPU & IO 瓶颈

3.1 Fiber 是什么？

4. Scheduler（调度器）：CPU 优化核心

4.1 时间切片 (Time Slicing)

5. React18 并发渲染 & 优先级

5.1 更新优先级（Lanes）

5.2 Suspense & Deferred UI（解决 IO 瓶颈）

6. React 19 的架构增强（编译器 + Actions）

6.1 Actions & 异步状态处理

6.2 新的 use API

6.3 Compiler：自动优化替代 useMemo / useCallback / React.memo

6.4 SSR 与 Server Actions 的支持

6.2 新的 `use` API