React--Fiber 架构

React 的 Fiber 架构是 React 16.x 版本引入的核心更新，旨在解决大型应用中渲染性能瓶颈的问题。它重新设计了协调算法（Reconciliation），使渲染过程更加可控和高效。

核心设计目标

1. 可中断渲染： 将渲染工作拆分成多个小任务，允许浏览器中断渲染进程，优先处理高优先级事件（如用户输入、动画）。
2. 优先级调度： 为不同类型的更新分配不同优先级，紧急更新（如动画）可以插队执行。
3. 增量渲染： 逐步完成渲染，避免长时间阻塞主线程导致页面卡顿。
4. 状态保存与恢复： 支持暂停、恢复渲染任务，并保留中间状态。

Fiber 的核心概念

1. Fiber 节点
Fiber 是 React 元素的内部表示，每个 React 元素对应一个 Fiber 节点。Fiber 节点包含：

• 组件类型（如Button、div）。
• 状态（state）和属性（props）。
• 指向父节点、子节点和兄弟节点的指针（形成链表结构）。
• 副作用（Side Effect）标记（如插入、更新、删除 DOM）。

2. 双缓存 Fiber 树
React 维护两棵 Fiber 树：

• current 树：当前显示在屏幕上的节点树。
• workInProgress 树：正在构建的新节点树。

通过alternate属性连接两棵树中的对应节点：

// Fiber节点的关键属性
const fiber = {
  alternate: currentFiber, // 指向current树中的对应节点
  effectTag: 'UPDATE',     // 标记需要执行的DOM操作
  firstEffect: null,       // 副作用链表头节点
  nextEffect: null,        // 指向下一个副作用节点
};

当渲染完成后，workInProgress树会替换current树，成为新的current树。

3. 渲染阶段（Render Phase）与提交阶段（Commit Phase）

• 渲染阶段：递归遍历组件树，构建workInProgress树。此阶段可中断，不会修改 DOM。
• 提交阶段：将workInProgress树一次性应用到 DOM 上。此阶段不可中断，确保用户不会看到部分更新的 UI。

Fiber 的工作流程

1. 调度阶段（Scheduler）： 根据更新优先级，决定何时开始渲染。

2. 协调阶段（Reconciler）：

• 遍历current树，为每个节点创建对应的workInProgress节点。
• 比较新旧节点差异，标记副作用（如插入、更新、删除）。

3. 提交阶段（Renderer）：

• 根据副作用标记，批量更新 DOM。
• 执行生命周期方法（如componentDidMount）。

Fiber 架构的优势

关键机制

机制	作用
时间切片	将渲染任务拆分，允许浏览器在空闲时间执行渲染，避免长时间阻塞主线程。
链表遍历	通过return、child、sibling指针替代递归，支持暂停和恢复。
优先级调度	高优先级任务可中断低优先级任务，确保关键更新（如动画）优先执行。
双缓存树	提高内存利用效率，减少频繁创建和销毁对象的开销。

与传统协调算法的对比

特性	传统协调算法	Fiber 架构
渲染方式	递归同步渲染（不可中断）	增量异步渲染（可中断）
性能	大型应用易卡顿	流畅响应，避免长时间阻塞
优先级控制	不支持	支持多优先级调度
错误处理	单个组件错误可能导致整棵树渲染失败	支持错误边界（Error Boundaries）

代码示例（概念演示）

下面是一个简化的 Fiber 节点结构示例：

const fiber = {
  type: 'div',        // 组件类型
  key: 'unique-key',  // 唯一标识
  props: {            // 属性
    className: 'container',
    children: [...]
  },
  stateNode: null,    // 对应的DOM节点
  return: null,       // 父Fiber节点
  child: null,        // 第一个子Fiber节点
  sibling: null,      // 下一个兄弟Fiber节点
  alternate: null,    // 指向current树中的对应节点
  effectTag: 'PLACEMENT', // 副作用标记（插入、更新、删除）
  // ...其他属性
};

代码示例（简化的工作循环）

// 简化的Fiber工作循环伪代码
function workLoop(hasTimeRemaining, initialTime) {
  let currentTime = initialTime;
  
  // 1. 处理当前工作单元（Fiber节点）
  while (workInProgress !== null && (hasTimeRemaining || shouldYieldToHost())) {
    workInProgress = performUnitOfWork(workInProgress);
    currentTime = requestCurrentTime();
  }
  
  // 2. 如果所有工作完成，进入提交阶段
  if (workInProgress === null && pendingCommit !== null) {
    commitRoot(pendingCommit);
  }
  
  // 3. 继续调度下一次渲染
  scheduleCallback(/* ... */);
}

// 处理单个Fiber节点
function performUnitOfWork(fiber) {
  // 1. 执行当前节点的工作（比较props/state，标记副作用）
  beginWork(fiber);
  
  // 2. 如果有子节点，返回第一个子节点继续处理
  if (fiber.child) {
    return fiber.child;
  }
  
  // 3. 否则，返回兄弟节点或父节点继续处理
  let current = fiber;
  while (current) {
    completeUnitOfWork(current);
    if (current.sibling) {
      return current.sibling;
    }
    current = current.return;
  }
  
  return null; // 所有工作完成
}

总结

Fiber 架构通过任务拆分、优先级调度 和 双缓存树，使 React 渲染更加灵活高效。理解其工作流程有助于：

1. 编写高性能 React 组件（如避免不必要的状态更新）。
2. 合理使用并发特性（如useTransition、useDeferredValue）。
3. 调试渲染性能问题（如通过 Profiler 分析优先级和耗时）。