这篇文章主要概括性的讲一下 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 优化。