简要解释 React 的 Filber

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 < tasks.length && deadline.timeRemaining() > 0) {
      console.log(`Processing: ${tasks[i]}`);
      i++;
    }
    if (i < tasks.length) {
      requestIdleCallback(workLoop); // 让出主线程，稍后继续
    }
  }
  requestIdleCallback(workLoop);
}

const tasksForFiber = ["Task 1", "Task 2", "Task 3"];
processTasksWithFiber(tasksForFiber, { timeRemaining: () => 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 < end; index++) {
      const element = elements[index];
      container.appendChild(element);
    }

    if (index < elements.length) {
      requestAnimationFrame(renderChunk); // 下一帧继续渲染
    }
  }

  renderChunk();
}

const elements = Array.from({ length: 100 }, (_, i) => document.createElement("div"));
renderInChunks(elements, document.body, 10); // 每次渲染 10 个元素

解释

renderInChunks 将渲染任务分割成多个小块，每帧只渲染一部分元素。
React 内部也有类似的机制，确保渲染过程不会阻塞主线程。

总结：Fiber 的优势表格

特性	传统虚拟 DOM	Fiber 架构
渲染方式	同步渲染（一次性完成）	异步渲染（可分批完成）
中断能力	不支持中断	支持中断和恢复
优先级控制	所有更新同等对待	支持动态优先级调度
内存管理	依赖递归调用栈	使用链表结构，更高效地管理内存
性能表现	大型应用中易出现性能瓶颈	更适合复杂场景，性能更稳定

通过上述内容，我们可以看到 Fiber 并没有取代虚拟 DOM，而是对其进行了优化和增强，使得 React 在现代 Web 应用中更加高效和灵活。

6. 总结

React Fiber 是 React 的一个重要改进，与传统虚拟 DOM 相比，它通过任务拆分、优先级调度和增量渲染，显著提升了应用的性能和响应性。它的核心思想是将复杂的协调过程分解为多个小任务，并利用浏览器的空闲时间逐步完成这些任务。

简要解释 React 的 Filber

1. 为什么需要 Fiber？

2. 什么是 Fiber？

Fiber 的主要特点：

3. Fiber 的核心概念

（1）Fiber 节点

（2）新的双缓冲技术（增量更新）

（3）任务拆分与调度

4. Fiber 的工作流程

（1）创建 Fiber 树

（2）任务分解

（3）任务调度

（4）渲染与提交

5. 传统虚拟 DOM 和 Fiber

Fiber 的核心功能和优点

1. 中断能力（Work Breakdown）

概念

为什么需要中断？

代码示例

解释

2. 优先级控制（Priority Management）

概念

代码示例

解释

3. 内存管理（Memory Management）

概念

表格对比

代码示例

解释

4. 异步渲染（Asynchronous Rendering）

概念

代码示例

解释

总结：Fiber 的优势表格

6. 总结

常见的前端缓存类型

Comments NOTHING

取消回复

1. 为什么需要 Fiber？

2. 什么是 Fiber？

Fiber 的主要特点：

3. Fiber 的核心概念

（1）Fiber 节点

（2） 新的双缓冲技术 （增量更新）

（3） 任务拆分与调度

4. Fiber 的工作流程

（1） 创建 Fiber 树

（2） 任务分解

（3） 任务调度

（4） 渲染与提交

5. 传统虚拟 DOM 和 Fiber

Fiber 的核心功能和优点

1. 中断能力 （Work Breakdown）

概念

为什么需要中断？

代码示例

解释

2. 优先级控制 （Priority Management）

概念

代码示例

解释

3. 内存管理 （Memory Management）

概念

表格对比

代码示例

解释

4. 异步渲染 （Asynchronous Rendering）

概念

代码示例

解释

总结：Fiber 的优势表格

6. 总结

常见的前端缓存类型

Comments NOTHING

取消回复

（2）新的双缓冲技术（增量更新）

（3）任务拆分与调度

（1）创建 Fiber 树

（2）任务分解

（3）任务调度

（4）渲染与提交

1. 中断能力（Work Breakdown）

2. 优先级控制（Priority Management）

3. 内存管理（Memory Management）

4. 异步渲染（Asynchronous Rendering）