Fiber 架构

为什么要引入 Fiber 架构？

在 React 16 之前，React 使用的是所谓的堆栈调和器（Stack Reconciler）。

最大特点：同步渲染，一旦开始，就必须等待它结束。

而当渲染一个复杂的组件树，主线程会被长时间占用，导致：

• 用户输入无响应。
• 动画效果卡顿掉帧。

Stack Reconciler 是一个 庞大的、不可打断 的 同步 渲染任务。

Fiber 核心思想

核心思想：

1. 可中断的渲染
2. 任务优先级的调度

将一个庞大的更新任务，拆解成许多微小的工作单元（Fiber）。

React 可以在每完成一个工作单元后，将控制权交还给浏览器，检查是否有更高优先级的任务（比如：用户输入）。

这个过程是 可中断、可恢复 的。

这个特性就让 React 和浏览器的主线程形成了一个 相辅相成，互相协作 的一个工作模式。

Fiber Reconciler 是一个 可拆分、可暂停、可调度、可赋予优先级 的 协作性系统。

Fiber 的两个阶段

1. 调和阶段：这是一个 可中断 的异步阶段。
   • 构建“工作中”的 Fiber 树。
   • 计算出所有节点的变更。
   • 此过程存在于内存中，可以被暂停、重做、丢弃，不会产生用户可见的副作用。
2. 提交阶段：这是一个 不可中断 的同步阶段。
   • 一旦调和阶段完成，进入提交阶段。
   • 将计算出的变更 一次性地 应用到 DOM 上。
   • 此过程必须是同步的，以确保 UI 的一致性，避免出现渲染了一半的界面。

Fiber 架构解决了哪些关键问题？

1. 增量渲染，避免了主进程阻塞。
2. 更新了优先级调度。
3. 为并发特性铺平道路。例如：Suspense、useTransition、useDeferredValue 等并发特性，都建立在 Fiber 的可中断、可调度的能力之上。