大前端 - 前端高级进阶

# Fiber及其工作原理

# Fiber 架构简介

Fiber 是 React 16 中引入的新协调引擎，它是对 React 核心算法的完全重写，旨在解决 React 15 和之前版本中的性能问题。

Fiber 架构的核心目标：

  • 能够将渲染工作分片
  • 能够为不同类型的更新分配优先级
  • 能够暂停、中止或重用渲染工作
  • 能够在父子组件之间更灵活地传递信息

# 为什么需要 Fiber

在 React 15 及之前的版本中，React 使用的是递归的方式进行协调过程（Reconciliation），这种方式被称为"栈协调器"（Stack Reconciler）。当组件树很大时，递归更新可能会阻塞主线程，导致一些问题：

  • 无法中断渲染，必须一次性完成所有工作
  • 动画和用户输入等高优先级工作无法及时响应，导致页面卡顿
  • 如果渲染时间过长，可能导致帧率下降，影响用户体验

# Fiber 的工作原理

# Fiber 数据结构

Fiber 是一种链表结构，每个 Fiber 节点对应一个 React 元素，包含如下重要信息：

{
  // 标记 Fiber 类型（函数组件/类组件/文本/宿主组件等）
  tag: WorkTag,
  // 指向父、子、兄弟节点的指针，形成树结构
  return: Fiber | null,  // 父节点
  child: Fiber | null,   // 第一个子节点
  sibling: Fiber | null, // 下一个兄弟节点
  // 节点状态和更新信息
  pendingProps: any,     // 新的待处理属性
  memoizedProps: any,    // 已处理的属性
  memoizedState: any,    // 组件状态
  updateQueue: UpdateQueue<any> | null, // 更新队列
  // 与渲染输出相关
  stateNode: any,        // 宿主组件实例（如 DOM 节点）
  // 工作标记（用于调度）
  flags: Flags,
  // 指向备用 Fiber 的指针（双缓存）
  alternate: Fiber | null,
}

# 双缓存机制

Fiber 架构采用双缓存（Double Buffering）技术：

  • current Fiber 树：当前已经渲染到屏幕上的树
  • workInProgress Fiber 树：正在构建的新树

这种机制使 React 能够在后台构建完整的 UI 树，而不影响当前显示的内容。只有当新树完全准备好时，React 才会一次性地切换到这个新树，从而减少中间状态导致的视觉不一致。

# 工作循环与时间切片

Fiber 架构的核心是其工作循环（work loop），它可以被中断：

function workLoop(deadline) {
  // 是否应该让出控制权
  let shouldYield = false;
  // 有工作要做且不需要让出控制权
  while (nextUnitOfWork && !shouldYield) {
    // 执行一个工作单元并返回下一个工作单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    // 检查是否还有剩余时间
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  // 如果没有下一个工作单元但有待处理的工作，请求下一次调度
  if (!nextUnitOfWork && workInProgressRoot) {
    commitRoot();
  }
  
  // 安排下一次工作
  requestIdleCallback(workLoop);
}

这种实现使 React 能够：

  • 在浏览器空闲时间执行渲染工作
  • 在必要时暂停渲染，让出主线程以处理高优先级的事件
  • 为不同类型的更新分配不同的优先级

# Fiber 执行的两个阶段

Fiber 渲染过程分为两个阶段：

  1. Render 阶段（可中断）：

    • 构建 Fiber 树
    • 计算变更
    • 可以被中断、重启、放弃

  2. Commit 阶段（不可中断）：

    • 将变更应用到 DOM
    • 调用生命周期方法
    • 一旦开始就必须同步完成

# Fiber 带来的优势

  1. 提高应用响应性：通过时间切片，避免长时间阻塞主线程
  2. 优先级调度：可以根据任务的紧急程度分配优先级，优先处理用户交互
  3. 更细粒度的更新：能够暂停、中止或重用渲染工作
  4. 并发模式的基础：为 React 18 中的并发特性奠定了基础
  5. 更好的错误处理：可以在不影响整个应用的情况下处理错误

# 与 React 18 并发特性的关系

Fiber 架构为 React 18 中的并发渲染提供了基础设施。在 React 18 中，新引入的特性如 useTransition、useDeferredValue 和自动批处理都是建立在 Fiber 架构之上的。

通过 Fiber 架构，React 能够实现真正的"并发渲染"，即同时准备多个版本的 UI，并根据优先级决定先渲染哪个，从而提供更流畅的用户体验。

← 常见框架&技术集成 →