本文由一缘原创整理，系统梳理 React Fiber 架构的核心原理、调度机制、并发渲染与优先级，适合所有 React/前端进阶开发者。

React Fiber 架构原理与调度机制

Fiber 是 React 16 引入的全新架构，支持并发渲染、任务分片和更灵活的调度。

1. 为什么要有 Fiber？

  • 传统 Stack Reconciler 递归不可中断，导致大树更新卡顿
  • Fiber 支持任务分片、可中断、优先级调度，实现流畅响应

2. Fiber 数据结构

  • Fiber 是一个 JS 对象，描述 UI 树的每个节点
  • 包含 type、key、stateNode、child、sibling、return、effectTag 等属性
const fiber = {
  type: 'div',
  key: null,
  stateNode: domNode,
  child: childFiber,
  sibling: siblingFiber,
  return: parentFiber,
  effectTag: 'UPDATE',
  // ...
};

3. Fiber 架构核心流程

  • Reconciliation（协调）：构建 Fiber 树，标记变更
  • Commit（提交）：将变更同步到 DOM
  • 任务分为“可中断的工作单元”

4. 并发渲染与优先级

  • React 18 支持并发特性（Concurrent Mode）
  • 任务有不同优先级（如用户输入 > 数据请求 > 动画）
  • 通过 requestIdleCallback 或 Scheduler 实现任务切片
function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 1) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  if (nextUnitOfWork) {
    requestIdleCallback(workLoop);
  }
}
requestIdleCallback(workLoop);

5. Fiber 协调算法（Reconciliation）

  • 通过 key、type 判断节点复用/删除/新增
  • 只遍历一层子节点，提升性能
// 简化版 diff 算法
function reconcileChildren(parentFiber, elements) {
  let oldFiber = parentFiber.child;
  let prevSibling = null;
  elements.forEach((el, i) => {
    let newFiber = {
      type: el.type,
      key: el.key,
      stateNode: null,
      return: parentFiber,
      effectTag: oldFiber ? 'UPDATE' : 'PLACEMENT',
    };
    if (i === 0) parentFiber.child = newFiber;
    else prevSibling.sibling = newFiber;
    prevSibling = newFiber;
    if (oldFiber) oldFiber = oldFiber.sibling;
  });
}

6. Fiber 的双缓存机制（双缓冲）

  • current Fiber 树：已挂载的 UI
  • workInProgress Fiber 树：本次更新的新树
  • 交换指针，提升性能

7. React 任务调度流程

  1. setState/props 触发更新，生成 update 对象
  2. 调度器（Scheduler）根据优先级插入任务队列
  3. 执行 workLoop，构建 Fiber 树
  4. 空闲时提交（commit）到 DOM

8. 并发特性与 Suspense

  • Suspense 支持异步组件、数据流
  • startTransition 降低任务优先级，提升交互流畅度
import { startTransition } from 'react';
startTransition(() => {
  setValue(input);
});

9. Fiber 架构的最佳实践

  • 合理使用 key，避免不必要的重渲染
  • 拆分大组件，减少 Fiber 树深度
  • 善用 React.memo/useMemo/useCallback 优化性能
  • 关注 React DevTools Profiler

10. 总结

Fiber 架构让 React 拥有了更强的可扩展性和性能，理解其原理有助于写出更高效、可维护的前端应用。