简要解释React的Filber
作者：shizhishi |
发布时间： |
分类：前端进阶 |
声明：个人技术博客 • 非官方 • 仅供技术学习交流
React Fiber 是 React 16 引入的一个全新的协调（Reconciliation）引擎，旨在解决旧版 React 协调算法（Stack Reconciler）的性能问题。Fiber 的核心目标是提高应用的响应性和性能，特别是在复杂 UI 和高交互性的场景下。 在 React 的早期版本中，协调过程是由一...
React Fiber 是 React 16 引入的一个全新的协调（Reconciliation）引擎，旨在解决旧版 React 协调算法（Stack Reconciler）的性能问题。Fiber 的核心目标是提高应用的响应性和性能，特别是在复杂 UI 和高交互性的场景下。
### 1. 为什么需要 Fiber？
在 React 的早期版本中，协调过程是由一个递归的深度优先搜索（DFS）实现的，称为 **Stack Reconciler**。这种实现方式存在以下问题：
* 阻塞性：整个协调过程是一个同步操作，无法中断。如果组件树非常庞大或更新复杂，主线程会被长时间占用，导致页面卡顿或掉帧。
* 用户体验差：由于 JavaScript 是单线程的，长时间运行的任务会阻塞用户交互（如输入、滚动、动画等），影响用户体验。
* 优先级管理不足：所有更新都被视为同等重要，无法区分高优先级和低优先级任务。
为了解决这些问题，React 团队引入了 **Fiber 架构**，它允许 React 在协调过程中进行任务拆分和调度，从而支持异步渲染和优先级控制。
### 2. 什么是 Fiber？
Fiber 是 React 中一种新的数据结构，用于表示组件树中的每个节点。它是对组件实例的一种抽象，包含了组件的状态、属性、子节点以及与协调相关的元信息。
#### Fiber 的主要特点：
* 中断能力（Work Breakdown）: Fiber架构将渲染工作分割成多个小单元（称为“工作单元”），这使得React可以在执行过程中暂停、继续或放弃某些任务。这种灵活性允许浏览器有足够的时间去处理其他高优先级的任务，如用户输入或动画，从而提高应用的整体响应性。
* 优先级控制（Priority Management）: 在Fiber架构下，不同的更新可以被赋予不同的优先级。例如，用户交互相关的更新（如点击按钮后的即时反馈）会被给予更高的优先级，而数据获取等不那么紧急的操作则可能被延迟处理。这确保了用户体验的流畅性。
* 内存管理（Memory Management）: 每个工作单元都有自己的栈帧信息，这意味着在处理过程中，Fiber能够更有效地管理内存。相比之下，传统虚拟DOM在大型应用中可能会遇到性能瓶颈，因为它依赖于递归调用栈，可能导致堆栈溢出或长时间阻塞主线程。
* 异步渲染（Asynchronous Rendering）: Fiber支持异步渲染过程，允许React在后台逐步更新视图，而不是一次性完成所有工作。这样即使是在资源受限的环境中，也能保持界面的流畅度。
### 3. Fiber 的核心概念
#### （1）Fiber 节点
每个 React Element 都会对应一个 Fiber 节点，Fiber 节点包含以下关键信息：
* type: 组件的类型（函数组件、类组件或原生 DOM 元素）。
* key: 唯一标识符，用于优化列表渲染。
* child: 指向第一个子节点。
* sibling: 指向下一个兄弟节点。
* return: 指向父节点。
* stateNode: 对应的真实 DOM 节点或组件实例。
* pendingProps 和 memoizedProps: 分别表示当前和上一次的 props。
* updateQueue: 存储状态更新的队列。
* effectTag: 标识需要执行的副作用（如插入、更新或删除 DOM 节点）。
#### （2）新的双缓冲技术（增量更新）
React 使用双缓冲树（Double Buffering Tree）来实现高效的更新：
* Current Tree: 当前屏幕上显示的 Fiber 树。
* Work-in-Progress Tree (WIP Tree): 正在构建的新 Fiber 树。
* 在每次更新完成后，React 会用 WIP Tree 替换 Current Tree，确保页面始终保持一致性。
#### （3）任务拆分与调度
Fiber 的协调过程被拆分为两个阶段：
* Render Phase（渲染阶段）:
* 这是一个纯计算阶段，可以被打断。
* 主要任务是生成新的 Fiber 树，并标记需要执行的副作用。
* 不涉及 DOM 操作，因此可以安全地暂停和恢复。
* Commit Phase（提交阶段）:
* 这是一个不可中断的阶段。
* 主要任务是将 Render Phase 的结果应用到真实 DOM 上，包括添加、更新或删除节点。
### 4. Fiber 的工作流程
Fiber 的工作流程可以分为以下几个步骤：
#### （1）创建 Fiber 树
当 React 接收到一个新的更新（如 setState 或 Hooks 更新）时，它会从根节点开始构建一个新的 Fiber 树（WIP Tree）。
#### （2）任务分解
Fiber 将每个组件的更新任务分解为更小的工作单元，这些单元可以独立执行。React Scheduler 会根据任务的优先级和可用时间片，决定何时执行这些任务。
#### （3）任务调度
React 使用自己的调度器（Scheduler）来管理任务的执行顺序：
* 高优先级任务（如用户交互）会被优先执行。
* 低优先级任务（如后台数据加载）可能会被延迟执行，甚至被取消。
#### （4）渲染与提交
一旦所有任务完成，React 会进入 Commit Phase，将更新结果应用到 DOM 上，并触发生命周期方法（如 `componentDidMount` 或 `useEffect`）。
### 5. 传统虚拟DOM和Fiber
虚拟DOM（Virtual DOM）和Fiber是React中用于提升性能和用户体验的两个不同概念，它们各自解决了不同的问题，并且在React的不同方面发挥作用。下面详细解释它们的区别：
#### Fiber 的核心功能和优点
##### 1. 中断能力（Work Breakdown）
##### 概念
Fiber 将整个渲染任务拆分为多个小的“工作单元”（work unit），每个工作单元可以被中断、暂停或继续执行。这种设计允许 React 在处理更新时让出主线程时间片，从而避免长时间阻塞浏览器，提升用户体验。
##### 为什么需要中断？
* 浏览器的主线程不仅要处理 JavaScript，还要负责绘制页面、响应用户输入等任务。
* 如果一个任务占用了主线程太久（如递归遍历虚拟 DOM 树），会导致页面卡顿，用户无法交互。
* Fiber 的中断能力解决了这个问题，让 React 可以分批完成渲染任务。
##### 代码示例
以下是一个简单的类比，展示如何将任务分解为多个小单元：
```
// 模拟传统递归方式
function processTasks(tasks) {
for (let task of tasks) {
console.log(`Processing: ${task}`);
// 假设这里有一些耗时操作
}
}
const tasks = ["Task 1", "Task 2", "Task 3"];
processTasks(tasks); // 整个任务一次性执行完毕
// 使用 Fiber 的中断能力（伪代码）
function processTasksWithFiber(tasks, deadline) {
let i = 0;
function workLoop() {
while (i 0) {
console.log(`Processing: ${tasks[i]}`);
i++;
}
if (i 5 }); // 分批执行
```
##### 解释
* processTasks 是传统的递归方式，任务会一次性执行完。
* processTasksWithFiber 使用了类似 Fiber 的中断机制，通过 requestIdleCallback 将任务分批执行，确保不会长时间占用主线程。
##### 2. 优先级控制（Priority Management）
##### 概念
不同的更新有不同的优先级。例如：
* 用户交互（如点击按钮）：高优先级。
* 数据获取（如从 API 获取数据）：低优先级。
Fiber 允许 React 动态调整更新的优先级，确保高优先级的任务能够优先完成，而低优先级的任务可以被延迟甚至取消。
##### 代码示例
React 内部使用 `Scheduler` 来管理优先级，以下是简化版的实现逻辑：
```
// 模拟不同优先级的任务
function performHighPriorityTask() {
console.log("Performing high priority task...");
}
function performLowPriorityTask() {
console.log("Performing low priority task...");
}
// 模拟调度器
function scheduler(tasksWithPriority) {
const sortedTasks = tasksWithPriority.sort((a, b) => a.priority - b.priority);
for (let task of sortedTasks) {
task.action();
}
}
const tasks = [
{ action: performHighPriorityTask, priority: 1 },
{ action: performLowPriorityTask, priority: 10 },
];
scheduler(tasks); // 高优先级任务先执行
```
##### 解释
* performHighPriorityTask 被赋予更高的优先级，因此会先执行。
* React 内部有类似的调度机制，确保用户交互相关的更新总是优先于其他任务。
##### 3. 内存管理（Memory Management）
##### 概念
在传统虚拟 DOM 中，递归调用栈可能会导致堆栈溢出或内存泄漏。Fiber 使用链表结构存储节点信息，每个节点都有自己的上下文（context），可以更有效地管理内存。
##### 表格对比
| 特性 | 传统虚拟 DOM | Fiber 架构 |
| --- | --- | --- |
| 数据结构 | 树形结构（递归遍历） | 链表结构（可中断遍历） |
| 内存占用 | 较高（依赖递归调用栈） | 较低（每个节点独立管理） |
| 错误隔离 | 错误可能影响整个树 | 错误仅影响当前节点及其子树 |
##### 代码示例
以下是一个简化的 Fiber 节点定义：
```
class FiberNode {
constructor(type, props) {
this.type = type; // 节点类型（如 'div'）
this.props = props; // 属性
this.child = null; // 子节点
this.sibling = null; // 兄弟节点
this.return = null; // 父节点
}
}
// 创建 Fiber 树
const root = new FiberNode("Root", {});
const childA = new FiberNode("ChildA", {});
const childB = new FiberNode("ChildB", {});
root.child = childA;
childA.sibling = childB;
childA.return = root;
childB.return = root;
console.log(root); // 输出 Fiber 树结构
```
##### 解释
* 每个 FiberNode 包含指向父节点、子节点和兄弟节点的指针，形成链表结构。
* 这种结构允许 React 在遍历时随时中断并恢复，避免递归调用栈的问题。
##### 4. 异步渲染（Asynchronous Rendering）
##### 概念
Fiber 支持异步渲染，这意味着 React 可以逐步更新视图，而不是一次性完成所有工作。这在资源受限的环境中尤为重要，例如低端设备或复杂的 UI 场景。
##### 代码示例
以下是一个异步渲染的伪代码示例：
```
function renderInChunks(elements, container, chunkSize) {
let index = 0;
function renderChunk() {
const end = Math.min(index + chunkSize, elements.length);
for (; index document.createElement("div"));
renderInChunks(elements, document.body, 10); // 每次渲染 10 个元素
```
##### 解释
* renderInChunks 将渲染任务分割成多个小块，每帧只渲染一部分元素。
* React 内部也有类似的机制，确保渲染过程不会阻塞主线程。
#### 总结：Fiber 的优势表格
| 特性 | 传统虚拟 DOM | Fiber 架构 |
| --- | --- | --- |
| 渲染方式 | 同步渲染（一次性完成） | 异步渲染（可分批完成） |
| 中断能力 | 不支持中断 | 支持中断和恢复 |
| 优先级控制 | 所有更新同等对待 | 支持动态优先级调度 |
| 内存管理 | 依赖递归调用栈 | 使用链表结构，更高效地管理内存 |
| 性能表现 | 大型应用中易出现性能瓶颈 | 更适合复杂场景，性能更稳定 |
通过上述内容，我们可以看到 Fiber 并没有取代虚拟 DOM，而是对其进行了优化和增强，使得 React 在现代 Web 应用中更加高效和灵活。
### 6. 总结
React Fiber 是 React 的一个重要改进，与传统虚拟DOM相比，它通过任务拆分、优先级调度和增量渲染，显著提升了应用的性能和响应性。它的核心思想是将复杂的协调过程分解为多个小任务，并利用浏览器的空闲时间逐步完成这些任务。