说说Fiber的含义与数据结构

我是区块链小学生
458 阅读4分钟

Fiber 是 React 16 引入的一种新的架构和数据结构，它是 React Reconciler 的核心实现。Fiber 的目标是解决 React 在渲染大型应用时的性能问题，并支持异步渲染、优先级调度等高级特性。以下是 Fiber 的含义及其数据结构的详细说明：

1. Fiber 的含义

1.1 Fiber 是什么？

  • Fiber 是 React 中的一个工作单元，表示一个组件或 DOM 节点。
  • 每个 Fiber 节点对应一个 React 元素（如组件、DOM 节点等），并包含了该元素的相关信息（如类型、状态、子节点等）。
  • Fiber 架构将渲染过程分解为多个小任务（Fiber 节点），每个任务可以在执行过程中暂停、中断和恢复。

1.2 Fiber 的目标

  • 异步渲染：将渲染任务分解为多个小任务，支持任务的暂停、中断和恢复。
  • 优先级调度：根据任务的优先级动态调整渲染顺序。
  • 增量渲染：将渲染任务分成多个小片段，逐步完成。
  • 更好的错误处理：支持错误边界（Error Boundaries），更好地捕获和处理组件树中的错误。

2. Fiber 的数据结构

Fiber 是一个 JavaScript 对象，包含了组件的类型、状态、子节点等信息。以下是 Fiber 的主要属性：

2.1 核心属性

属性说明
type组件的类型（如函数组件、类组件、DOM 节点类型等）。
key组件的唯一标识符，用于优化列表渲染。
props组件的属性（props）。
stateNode组件实例或 DOM 节点。
tagFiber 节点的类型（如函数组件、类组件、Host 组件等）。
return父 Fiber 节点。
child第一个子 Fiber 节点。
sibling下一个兄弟 Fiber 节点。
index当前 Fiber 节点在父节点中的索引。
ref组件的引用（ref）。
pendingProps新的 props，等待应用到组件。
memoizedProps上一次渲染时使用的 props。
memoizedState上一次渲染时使用的 state。
updateQueue状态更新的队列。
effectTag标记当前 Fiber 节点的副作用（如插入、更新、删除等）。
nextEffect下一个有副作用的 Fiber 节点。
firstEffect第一个有副作用的子 Fiber 节点。
lastEffect最后一个有副作用的子 Fiber 节点。
alternate当前 Fiber 节点的副本，用于双缓存机制。
expirationTime任务的过期时间，用于优先级调度。
mode渲染模式（如同步模式、并发模式等）。

2.2 示例

以下是一个 Fiber 节点的示例：

{
  type: 'div', // 节点类型
  key: null,   // 唯一标识符
  props: {     // 属性
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Hello, World!' } },
      { type: 'p', props: { children: 'This is a paragraph.' } }
    ]
  },
  stateNode: divElement, // 对应的 DOM 节点
  tag: 5,                // 节点类型（5 表示 Host 组件）
  return: parentFiber,   // 父节点
  child: childFiber,     // 第一个子节点
  sibling: siblingFiber, // 下一个兄弟节点
  index: 0,              // 在父节点中的索引
  ref: null,             // 引用
  pendingProps: { className: 'container' }, // 新的 props
  memoizedProps: { className: 'container' }, // 上一次渲染时使用的 props
  memoizedState: null,   // 上一次渲染时使用的 state
  updateQueue: null,     // 状态更新队列
  effectTag: 1,          // 副作用标记（1 表示插入）
  nextEffect: null,      // 下一个有副作用的节点
  firstEffect: null,     // 第一个有副作用的子节点
  lastEffect: null,      // 最后一个有副作用的子节点
  alternate: null,       // 当前节点的副本
  expirationTime: 0,     // 任务过期时间
  mode: 0                // 渲染模式
}

3. Fiber 的双缓存机制

React 使用双缓存机制来管理 Fiber 树：

  • 当前树（Current Tree）：当前显示的 UI 对应的 Fiber 树。
  • 工作树（WorkInProgress Tree）：正在构建的新 Fiber 树。

当工作树构建完成后，React 会将其切换为当前树，从而实现 UI 的更新。

4. Fiber 的任务调度

React 使用调度器（Scheduler）来管理 Fiber 任务的执行顺序：

  • 调度器会根据任务的优先级动态调整执行顺序，确保高优先级的任务优先执行。
  • 例如，用户输入（高优先级）会优先处理，而数据更新（低优先级）可以稍后处理。

5. 总结

  • Fiber 的含义：
    • Fiber 是 React 中的一个工作单元，表示一个组件或 DOM 节点。
    • Fiber 架构支持异步渲染、优先级调度、增量渲染等特性。
  • Fiber 的数据结构：
    • Fiber 是一个 JavaScript 对象，包含了组件的类型、状态、子节点等信息。
    • 主要属性包括 type、props、stateNode、child、sibling、effectTag 等。
  • Fiber 的双缓存机制：
    • 使用当前树和工作树来管理 Fiber 树的更新。
  • Fiber 的任务调度：
    • 使用调度器根据任务优先级动态调整执行顺序。

通过 Fiber 架构，React 实现了更高效、更灵活的渲染机制，能够更好地满足现代 Web 应用的需求。

avatar
文章
阅读
粉丝