React Fiber 架构深度解析：并发渲染机制与调度算法

React Fiber 是 React 16 引入的重新实现的渲染架构，它不仅提升了性能，更重要的是为并发渲染奠定了基础。本文将从底层原理出发，深入解析 Fiber 的设计思想和实现机制。

Fiber 架构的诞生背景

Stack Reconciler 的局限性

在 Fiber 之前，React 使用 Stack Reconciler（栈协调器），它采用递归的方式遍历组件树：

// 旧的 Stack Reconciler 工作方式（伪代码）
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}
 
function performUnitOfWork(unitOfWork) {
  const next = beginWork(unitOfWork);
  unitOfWork.memoizedProps = unitOfWork.pendingProps;
 
  if (next === null) {
    completeUnitOfWork(unitOfWork);
  } else {
    workInProgress = next;
  }
}

问题：

阻塞式：递归一旦开始就无法中断，必须完成整个组件树
优先级控制困难：无法优先处理重要更新
用户体验差：大量更新会阻塞主线程，导致动画卡顿、输入延迟

Fiber 节点：新的数据结构

Fiber 的核心是将递归遍历改为链表遍历，每个 Fiber 节点代表一个组件实例：

// Fiber 节点结构（简化版）
interface Fiber {
  // 节点标识
  tag: WorkTag; // 组件类型（函数组件、类组件等）
  key: string | null;
  elementType: any;
  type: any;
 
  // 状态
  stateNode: any; // 对应的 DOM 节点或组件实例
  return: Fiber | null; // 父节点
  child: Fiber | null; // 第一个子节点
  sibling: Fiber | null; // 下一个兄弟节点
  index: number;
 
  // 更新相关
  pendingProps: any; // 待处理的 props
  memoizedProps: any; // 已处理的 props
  updateQueue: UpdateQueue; // 更新队列
  memoizedState: any; // 当前状态
 
  // 副作用
  flags: Flags; // 需要执行的操作（增删改）
  subtreeFlags: Flags; // 子树中的副作用
 
  // 工作循环
  alternate: Fiber | null; // 对应的另一棵树（双缓冲）
}

链表结构的优势

// Fiber 树的遍历方式
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}
 
function performUnitOfWork(unitOfWork) {
  const next = beginWork(unitOfWork);
  unitOfWork.memoizedProps = unitOfWork.pendingProps;
 
  if (next === null) {
    // 没有子节点，完成当前节点
    completeUnitOfWork(unitOfWork);
  } else {
    // 有子节点，继续处理
    workInProgress = next;
  }
 
  // 关键：可以随时返回，下次继续
  return workInProgress;
}

这种设计使得 React 可以在任何两个 Fiber 节点之间中断和恢复工作。

时间切片（Time Slicing）

requestIdleCallback 的封装

React Fiber 使用时间切片来避免长时间占用主线程：

// 简化的时间切片实现
let deadline = 0;
const yieldInterval = 5; // 5ms 为一个时间片
 
function shouldYield() {
  return performance.now() >= deadline;
}
 
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress);
  }
 
  // 时间片用完了，让出控制权
  if (workInProgress !== null) {
    // 使用 MessageChannel 调度下一次工作
    scheduleCallback(workLoopConcurrent);
  }
}
 
// React 实际使用 Scheduler 包进行更精确的调度
function scheduleCallback(priorityLevel, callback) {
  const currentTime = getCurrentTime();
  let timeout;
 
  switch (priorityLevel) {
    case ImmediatePriority:
      timeout = -1;
      break;
    case UserBlockingPriority:
      timeout = 250;
      break;
    case NormalPriority:
    default:
      timeout = 5000;
      break;
    case LowPriority:
      timeout = 10000;
      break;
    case IdlePriority:
      timeout = maxSigned31BitInt;
      break;
  }
 
  const expirationTime = currentTime + timeout;
  const newTask = {
    id: taskIdCounter++,
    callback,
    priorityLevel,
    expirationTime,
    sortIndex: -1,
  };
 
  if (startTime <= currentTime) {
    // 立即执行
    performWorkUntilDeadline();
  } else {
    // 延迟执行
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
  }
}

双缓冲机制

React 维护两棵 Fiber 树来优化性能：

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

// 双缓冲的工作原理
let current = root.current; // 当前树的根节点
let workInProgress = current.alternate; // 对应的新树根节点
 
if (workInProgress === null) {
  // 首次渲染，创建新的 Fiber 节点
  workInProgress = createWorkInProgress(current, pendingProps);
}
 
// 渲染完成后交换
root.current = workInProgress; // 新树变成当前树
// 旧的 current 树会被回收或成为新的 workInProgress

这种机制避免了创建大量新对象，提升了性能。

优先级调度

更新优先级系统

React 定义了多种优先级：

// React 内部的优先级（简化）
export const ImmediatePriority = 1; // 立即执行
export const UserBlockingPriority = 2; // 用户阻塞优先级（如输入）
export const NormalPriority = 3; // 普通优先级
export const LowPriority = 4; // 低优先级
export const IdlePriority = 5; // 空闲优先级

优先级标记与调度

// 标记 Fiber 的优先级
function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
  sourceFiber.lanes |= lane;
  let alternate = sourceFiber.alternate;
  if (alternate !== null) {
    alternate.lanes |= lane;
  }
 
  // 向上遍历到根节点，标记所有父节点
  let node = sourceFiber.return;
  let root = null;
  while (node !== null) {
    alternate = node.alternate;
    const childLanes = getLanesFromFiberAndChildren(node, lane);
    node.childLanes |= childLanes;
 
    if (alternate !== null) {
      alternate.childLanes |= childLanes;
    }
 
    if (node.return === null && node.tag === HostRoot) {
      root = node.stateNode;
      break;
    }
    node = node.return;
  }
 
  if (root !== null) {
    // 调度根节点的更新
    markRootUpdated(root, lane);
    ensureRootIsScheduled(root);
  }
}
 
// 确保根节点被调度
function ensureRootIsScheduled(root) {
  const nextLanes = getNextLanes(
    root,
    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes
  );
 
  if (nextLanes === NoLanes) {
    return;
  }
 
  // 根据优先级选择同步或并发渲染
  let newCallbackPriority;
  if (newCallbackPriority === SyncLane) {
    // 同步渲染
    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
  } else {
    // 并发渲染
    scheduleCallback(
      schedulerPriorityLevel,
      performConcurrentWorkOnRoot.bind(null, root)
    );
  }
}

并发模式（Concurrent Mode）

startTransition API

React 18 引入了 startTransition 来标记非紧急更新：

import { startTransition, useState } from "react";
 
function SearchResults({ query }) {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);
 
  useEffect(() => {
    // 标记为非紧急更新
    startTransition(() => {
      const newResults = expensiveSearch(query);
      setResults(newResults);
    });
  }, [query]);
 
  return (
    <div>
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </div>
  );
}

底层原理：startTransition 会将更新标记为 TransitionLane，优先级低于用户输入，但高于普通更新。

Suspense 与并发渲染

// Suspense 如何配合并发渲染
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfilePage />
    </Suspense>
  );
}
 
function ProfilePage() {
  const [resource] = useState(() => createResource(fetchUser));
  const user = resource.read(); // 可能抛出 Promise
 
  return <div>{user.name}</div>;
}

工作流程：

resource.read() 如果数据未就绪，抛出 Promise
React 捕获 Promise，暂停渲染 ProfilePage
显示 fallback（Loading）
Promise 完成后，React 重新尝试渲染
数据已就绪，正常渲染内容

渲染阶段与提交阶段

Render Phase（可中断）

// Render Phase：构建 workInProgress 树
function renderRootSync(root) {
  do {
    try {
      workLoopSync();
    } catch (thrownValue) {
      handleError(root, thrownValue);
    }
  } while (true);
}
 
function beginWork(current, workInProgress, renderLanes) {
  // 处理不同类型的组件
  switch (workInProgress.tag) {
    case FunctionComponent:
      return updateFunctionComponent(current, workInProgress, Component);
    case ClassComponent:
      return updateClassComponent(current, workInProgress, Component);
    case HostComponent:
      return updateHostComponent(current, workInProgress);
    // ...
  }
}

这个阶段可以被打断，不会产生副作用。

Commit Phase（不可中断）

// Commit Phase：应用到 DOM
function commitRoot(root) {
  // 提交前：执行 getSnapshotBeforeUpdate
  commitBeforeMutationEffects(root, finishedWork);
 
  // 提交中：应用 DOM 变更
  commitMutationEffects(root, finishedWork);
 
  // 提交后：执行生命周期和 effect
  commitLayoutEffects(finishedWork, root);
  commitPassiveUnmountEffects(finishedWork);
  commitPassiveMountEffects(root, finishedWork);
}

这个阶段必须同步执行完成，不能中断，因为 DOM 操作是同步的。

实际应用：理解 React 的行为

理解了 Fiber 架构，你就能更好地理解 React 的某些行为：

为什么 useEffect 在 commit 阶段执行：避免在可中断的 render 阶段执行副作用
为什么 setState 可能是异步的：React 会批量处理更新，优化性能
为什么 useLayoutEffect 在 DOM 更新后同步执行：在 commit 阶段立即执行，避免视觉闪烁

// 批量更新示例
function Component() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    // 这些更新会被批量处理
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    // 最终 count 只增加 1，而不是 3
    // 因为 React 会合并这些更新
  };
}

React Fiber 架构的设计体现了 React 团队对性能、用户体验和开发者体验的深度思考。理解这些底层原理，能帮助我们在遇到复杂问题时找到更好的解决方案。