当前位置：首页 > news >正文

React架构演变

news 2026/3/27 0:25:56

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

1. React 核心架构

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 阶段：

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 可以声明性地处理异步数据：

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

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

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

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

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

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

6.1 Actions & 异步状态处理

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

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

它自动处理：

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

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

6.2 新的 `use` API

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

const data = use(fetchPromise)

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

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

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

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