React Fiber 详解

React Fiber 详解

React Fiber 是 React 16 引入的一种核心算法，用于解决同步渲染模型中的性能和灵活性问题。它是一种基于时间分片（Time Slicing）实现的调度机制，使得 React 在处理大量更新任务时更高效、更可控。

一、什么是 Fiber？

Fiber 是 React 的一种重新实现的协调算法，它以一种更细粒度的方式处理组件更新，使得可以将渲染任务分解为多个小任务，并在空闲时间逐步完成这些任务。这样可以避免主线程长时间被占用，从而提升页面响应速度。

二、Fiber 核心特性

1. 可中断更新

   • 在旧的 React 调和算法中，更新是同步的。如果渲染一个复杂的组件树需要较长时间，主线程会被阻塞，导致用户界面出现卡顿。
   • Fiber 的可中断特性允许 React 暂停当前任务，优先处理更紧急的任务（如用户输入）。

2. 时间分片 (Time Slicing)

   • React 会将渲染任务切分为多个小任务，在浏览器空闲时逐步执行这些任务。
   • 使用 requestIdleCallback 或 scheduler 调度渲染任务。

3. 任务优先级

   • Fiber 为每个更新任务分配优先级，根据任务的紧急程度来决定其执行顺序。

4. 增量渲染

   • React Fiber 的渲染过程是增量的，每次渲染只

React Fiber 详解（续）

每次渲染只处理部分任务，完成后将控制权交回浏览器，再继续处理剩余任务。这种增量渲染使得 React 能保持界面的流畅性。

三、Fiber 的核心结构

Fiber 是一种数据结构，每个 React 组件都会对应一个 Fiber 节点。一个 Fiber 节点记录了组件的以下信息：

1. Tag

   • 标识 Fiber 节点的类型，比如函数组件、类组件、原生 DOM 节点等。
   • 常见的 Tag 类型：
     • FunctionComponent
     • ClassComponent
     • HostComponent（原生 DOM 节点）
     • HostText（文本节点）

2. Key

   • 用于标识节点在同级节点中的唯一性，优化 Diff 过程。

3. Type

   • 对于函数组件或类组件，指向组件本身。
   • 对于 DOM 节点，指向节点的标签名（如 div）。

4. StateNode

   • 对于类组件，指向组件实例。
   • 对于 DOM 节点࿰