React Fiber 架构与并发调度：从同步阻塞到可中断渲染

React 16 引入的 Fiber 架构是前端框架史上最深刻的底层重构之一。它不仅解决了同步渲染的阻塞问题，更重新定义了 UI 更新的调度模型。本文从源码级视角拆解 Fiber 的数据结构、工作循环、优先级调度与并发模式的实现细节。

一、为什么需要 Fiber？

React 15 的 Stack Reconciler 是同步递归的——一旦开始 Diff + Patch，就无法中断。当组件树庞大时，一帧（16.67ms）内无法完成，用户就会感知掉帧卡顿。

核心矛盾：JS 执行与浏览器渲染共享同一个主线程，长时间占用主线程 = 丢弃帧。

Fiber 的解法：将同步递归改为可中断的链表遍历，让渲染工作可以被拆分、暂停、恢复、丢弃。

二、Fiber 节点的数据结构

每个 React 元素对应一个 Fiber 节点，它本质上是一个链表节点：

interface Fiber {
  // 静态结构
  tag: WorkTag;              // 函数组件/类组件/原生DOM等类型标识
  type: any;                 // 对应的组件函数或DOM标签
  key: string | null;

  // 链表关系（核心！）
  return: Fiber | null;      // 父节点
  child: Fiber | null;       // 第一个子节点
  sibling: Fiber | null;     // 右侧兄弟节点
  index: number;             // 在兄弟中的位置

  // 工作状态
  pendingProps: any;         // 待处理的新 props
  memoizedProps: any;        // 上次渲染的 props
  memoizedState: any;        // 上次渲染的 state（含 hooks 链表）
  updateQueue: any;          // 待处理的更新队列

  // 副作用
  flags: Flags;              // Placement/Update/Deletion 等副作用标记
  subtreeFlags: Flags;       // 子树副作用聚合（优化冒泡）
  deletions: Array<Fiber>;   // 需要删除的子节点

  // 双缓冲
  alternate: Fiber | null;   // 指向另一棵树的对应节点
}

关键洞察： child + sibling + return 构成了一棵用链表表达的树。这意味着遍历不需要递归调用栈，可以用循环 + 指针完成——这就是可中断的前提。

三、双缓冲机制：current 树与 workInProgress 树

React 同时维护两棵 Fiber 树：

• current 树：当前屏幕上对应的 Fiber 树，current 指针指向它
• workInProgress 树：正在构建的新 Fiber 树，通过 alternate 与 current 树互指

// 简化的创建 workInProgress 逻辑
function createWorkInProgress(current, pendingProps) {
  let workInProgress = current.alternate;
  if (workInProgress === null) {
    // 首次创建
    workInProgress = createFiber(current.tag, pendingProps, current.key);
    workInProgress.type = current.type;
    workInProgress.stateNode = current.stateNode;
    workInProgress.alternate = current;
    current.alternate = workInProgress;
  } else {
    // 复用已有节点
    workInProgress.pendingProps = pendingProps;
    workInProgress.flags = NoFlags;
    workInProgress.subtreeFlags = NoFlags;
    workInProgress.deletions = null;
  }
  // 同步副作用标记等...
  return workInProgress;
}

渲染完成后，current 指针切换到 workInProgress 树，旧 current 树成为下次的 alternate 池。这就是双缓冲——类似显卡的前后缓冲区切换。

四、工作循环：Fiber 的心跳

整个可中断渲染的核心是 workLoop：

function workLoopConcurrent() {
  // 只要还有工作且时间片未耗尽
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

function performUnitOfWork(unitOfWork: Fiber) {
  const current = unitOfWork.alternate;
  // 1. 处理当前节点（beginWork）
  const next = beginWork(current, unitOfWork, renderLanes);
  unitOfWork.memoizedProps = unitOfWork.pendingProps;

  if (next === null) {
    // 没有子节点，完成当前节点
    completeUnitOfWork(unitOfWork);
  } else {
    workInProgress = next;
  }
}

shouldYield() 是调度器的桥梁——它检查当前时间片是否耗尽。如果耗尽，循环退出，主线程还给浏览器，等下一帧继续。

遍历顺序遵循深度优先：先 beginWork 向下处理子节点，子节点处理完后 completeWork 向上回溯处理副作用。

五、优先级调度：Lane 模型

React 用 Lane 替代了早期的 Expiration Time 模型。Lane 本质是一个 31 位的位掩码（bitmask）：

// 部分优先级定义（从高到低）
const SyncLane: Lane = 0b0000000000000000000000000000001;     // 同步（离散输入）
const InputContinuousLane: Lane = 0b0000000000000000000000000000100; // 连续输入
const DefaultLane: Lane = 0b0000000000000000000000000010000;  // 默认
const TransitionLane: Lane = 0b0000000000000000000100000000000; // 过渡更新
const IdleLane: Lane = 0b0100000000000000000000000000000;     // 空闲

位运算实现高效优先级判断：

// 检查是否包含某优先级
function includesLane(lanes: Lanes, lane: Lane) {
  return (lanes & lane) !== NoLanes;
}

// 合并优先级
function mergeLanes(a: Lanes, b: Lanes) {
  return a | b;
}

// 取最高优先级车道
function getHighestPriorityLane(lanes: Lanes) {
  return lanes & -lanes; // 利用补码取最低位的1
}

Lane 模型的优势：

• O(1) 优先级比较：位运算替代排序
• 批量处理同优先级更新：一次遍历处理同一 lane 的所有更新
• 饥饿问题可检测：低优先级等待过久可被提升

六、并发特性的实现

6.1 useTransition

const [isPending, startTransition] = useTransition();

function handleClick() {
  // 立即更新（高优先级）
  setInputValue(input);

  // 标记为过渡更新（低优先级，可中断）
  startTransition(() => {
    setSearchQuery(input);
  });
}

startTransition 内部调用 requestUpdateLane 获取 TransitionLane，让更新进入低优先级队列。高优先级更新（如输入）到来时，过渡更新被中断，等高优先级完成后再恢复。

6.2 useDeferredValue

const deferredQuery = useDeferredValue(searchQuery);

实现原理：在渲染阶段检测 deferredQuery 是否落后于 searchQuery，如果是，则以低优先级（TransitionLane）调度一次额外渲染。等高优先级渲染完成后再处理延迟值。

七、性能数据与实战启示

在一个 10000 行列表的过滤场景中对比：

模式	输入响应延迟	列表更新耗时	掉帧次数
同步渲染	120ms（阻塞）	120ms	~7帧
useTransition	5ms	150ms（可中断）	0帧
useDeferredValue	5ms	160ms（可中断）	0帧

关键结论： 并发模式不减少总工作量，而是通过优先级调度保证关键交互的响应性。

八、常见误区

1. "Fiber = 并发" — 错。Fiber 是架构重构，并发是调度策略。React 17 有 Fiber 但默认仍是同步渲染。
2. "useTransition 让更新变快" — 错。它让更新变慢（低优先级），但让交互变快。
3. "并发模式没有额外成本" — 错。双缓冲、优先级管理、中断恢复都有内存和计算开销，小应用反而可能更慢。

---

关键要点

1. Fiber 将递归树遍历改为链表遍历，这是可中断渲染的物理基础——递归调用栈无法暂停，链表指针可以。
2. 双缓冲机制通过 current/workInProgress 互指实现无锁切换，保证屏幕一致性。
3. Lane 位掩码模型以 O(1) 的位运算实现优先级判断、合并与拆分，远优于排序或链表队列。
4. 并发调度的本质是优先级抢占：高优先级更新中断低优先级，低优先级等待恢复而非丢弃。
5. 并发不是免费的午餐：架构复杂度和内存开销增加，需要根据场景选择同步或并发策略。