React Fiber架构原理剖析

左杰2025-12-182025-12-18

Fiber架构的背景

传统Stack Reconciler的局限性

在Fiber架构之前，React使用Stack Reconciler（栈协调器），存在以下问题：

不可中断的渲染：一旦开始渲染，必须完成整个树的计算
阻塞主线程：大量计算会导致页面卡顿
优先级处理困难：无法区分高优先级和低优先级更新

Fiber架构的设计目标

可中断的工作：将渲染工作分解为小单元，可以暂停和恢复
优先级调度：根据不同优先级安排工作执行顺序
并发渲染：支持并发模式下的渲染
错误边界：更好的错误处理机制

Fiber节点的数据结构

Fiber节点的核心属性

// Fiber节点的基本结构
const fiberNode = {
  // 标识信息
  tag: WorkTag,          // 组件类型（函数组件、类组件等）
  key: null,             // 唯一标识
  type: null,            // 组件类型或DOM标签名
  
  // 状态信息
  stateNode: null,       // 对应的DOM节点或组件实例
  memoizedProps: null,   // 上一次渲染的props
  memoizedState: null,   // 上一次渲染的state
  updateQueue: null,     // 更新队列
  
  // 链表结构
  return: null,          // 父Fiber
  child: null,           // 第一个子Fiber
  sibling: null,         // 下一个兄弟Fiber
  index: 0,              // 在父节点中的索引
  
  // 副作用标识
  flags: 0,              // 副作用标志（增、删、改）
  subtreeFlags: 0,       // 子树副作用标志
  deletions: null,       // 待删除的子节点
  
  // 工作相关
  alternate: null,       // 用于双缓存技术的alternate Fiber
  lanes: 0,              // 优先级车道
  childLanes: 0,         // 子节点优先级车道
  
  // 生命周期相关
  mode: 0,               // 模式（并发模式等）
};

Fiber树的链表结构

// Fiber树的链表表示
const fiberTree = {
  // App组件
  tag: FunctionComponent,
  type: App,
  child: {
    // Header组件
    tag: FunctionComponent,
    type: Header,
    return: AppFiber,
    sibling: {
      // Content组件
      tag: FunctionComponent,
      type: Content,
      return: AppFiber,
      child: {
        // Paragraph组件
        tag: HostComponent,
        type: 'p',
        return: ContentFiber
      },
      sibling: null
    }
  }
};

Fiber架构的工作流程

双缓存技术（Double Buffering）

// 双缓存Fiber树
let current = null;      // 当前显示的Fiber树
let workInProgress = null; // 正在构建的Fiber树

function prepareFreshStack(root) {
  // 创建workInProgress树
  workInProgress = createWorkInProgress(current, null);
}

function commitRoot() {
  // 提交workInProgress树
  const finishedWork = workInProgress;
  current = finishedWork; // 切换current指针
  workInProgress = null;  // 重置workInProgress
}

工作循环（Work Loop）

function workLoop(deadline) {
  let shouldYield = false;
  
  while (nextUnitOfWork !== null && !shouldYield) {
    // 执行一个工作单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    
    // 检查是否需要让出主线程
    shouldYield = deadline.timeRemaining() < 1;
  }
  
  if (nextUnitOfWork !== null) {
    // 还有工作，请求下一次调度
    requestIdleCallback(workLoop);
  } else {
    // 所有工作完成，提交结果
    commitRoot();
  }
}

协调算法（Reconciliation）

Diff算法优化

function reconcileChildrenArray(
  returnFiber,
  currentFirstChild,
  newChildren,
  lanes
) {
  let resultingFirstChild = null;
  let previousNewFiber = null;
  
  let oldFiber = currentFirstChild;
  let lastPlacedIndex = 0;
  let newIdx = 0;
  let nextOldFiber = null;
  
  // 第一轮：遍历新旧子节点
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    if (oldFiber.index > newIdx) {
      nextOldFiber = oldFiber;
      oldFiber = null;
    } else {
      nextOldFiber = oldFiber.sibling;
    }
    
    // 尝试复用旧的Fiber
    const newFiber = updateSlot(
      returnFiber,
      oldFiber,
      newChildren[newIdx],
      lanes
    );
    
    if (newFiber === null) {
      if (oldFiber === null) {
        oldFiber = nextOldFiber;
      }
      break;
    }
    
    // 记录位置信息
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    
    // 构建新的Fiber链表
    if (previousNewFiber === null) {
      resultingFirstChild = newFiber;
    } else {
      previousNewFiber.sibling = newFiber;
    }
    previousNewFiber = newFiber;
    oldFiber = nextOldFiber;
  }
  
  // 处理剩余的新节点或旧节点
  // ... 省略后续处理逻辑
}

优先级调度（Lane模型）

// 优先级车道定义
export const NoLanes = 0b0000000000000000000000000000000;
export const NoLane = 0b0000000000000000000000000000000;
export const SyncLane = 0b0000000000000000000000000000001;
export const InputContinuousLane = 0b0000000000000000000000000000010;
export const DefaultLane = 0b0000000000000000000000000000100;
export const IdleLane = 0b0100000000000000000000000000000;
export const OffscreenLane = 0b1000000000000000000000000000000;

// 优先级调度函数
function scheduleUpdateOnFiber(fiber, lane) {
  // 标记根节点需要更新
  markRootUpdated(root, lane);
  
  // 根据优先级安排调度
  if (lane === SyncLane) {
    // 同步更新，立即执行
    performSyncWorkOnRoot(root);
  } else {
    // 异步更新，安排到合适的时间
    ensureRootIsScheduled(root);
  }
}

并发模式（Concurrent Mode）

可中断渲染

function performConcurrentWorkOnRoot(root) {
  // 检查是否有更高优先级的任务
  if (shouldYield()) {
    // 让出主线程，返回null表示工作未完成
    return null;
  }
  
  // 执行并发工作
  const didFullyRender = renderRootConcurrent(root, lanes);
  
  if (didFullyRender) {
    // 渲染完成，准备提交
    const finishedWork = root.current.alternate;
    commitRoot(root, finishedWork);
  }
  
  return null;
}

Suspense和懒加载

function lazy(ctor) {
  let thenable = null;
  
  return {
    $$typeof: REACT_LAZY_TYPE,
    _payload: {
      _status: -1, // 未初始化
      _result: ctor,
    },
    _init(payload) {
      if (payload._status === -1) {
        // 初始化
        const ctor = payload._result;
        thenable = ctor();
        payload._status = 0; // 等待中
        payload._result = thenable;
      }
      
      switch (payload._status) {
        case 0: // 等待中
          throw thenable;
        case 1: // 已解析
          return payload._result;
        case 2: // 已拒绝
          throw payload._result;
      }
    }
  };
}

错误处理机制

Error Boundaries的实现

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    // 更新state使下一次渲染能够显示降级后的UI
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    // 你可以将错误日志上报到服务器
    logErrorToService(error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的UI并渲染
      return this.props.fallback;
    }
    
    return this.props.children;
  }
}

Fiber架构中的错误处理

function throwException(
  root,
  returnFiber,
  sourceFiber,
  value,
  rootRenderLanes
) {
  sourceFiber.flags |= Incomplete;
  
  if (
    value !== null &&
    typeof value === 'object' &&
    typeof value.then === 'function'
  ) {
    // Suspense相关错误处理
    // ... 省略Suspense处理逻辑
  } else {
    // 普通错误处理
    let workInProgress = returnFiber;
    do {
      switch (workInProgress.tag) {
        case ClassComponent:
          // 类组件的错误边界
          const instance = workInProgress.stateNode;
          if (
            typeof instance.componentDidCatch === 'function' &&
            !isAlreadyFailedLegacyErrorBoundary(instance)
          ) {
            // 找到错误边界，安排更新
            const lane = requestUpdateLane();
            const update = createClassErrorUpdate(
              workInProgress,
              value,
              lane
            );
            enqueueUpdate(workInProgress, update, lane);
            markRootUpdated(root, lane);
            return;
          }
          break;
        case HostRoot:
          // 根节点的错误处理
          break;
      }
      workInProgress = workInProgress.return;
    } while (workInProgress !== null);
  }
}

性能优化策略

时间分片（Time Slicing）

function shouldYield() {
  // 检查是否应该让出主线程
  return (
    // 时间片用完
    deadline !== null && 
    deadline.timeRemaining() <= 0 &&
    // 或者有更高优先级的任务
    (needsPaint || scheduler.shouldYieldToHost())
  );
}

优先级标记（Priority Marking）

function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
  // 从当前Fiber向上标记优先级
  sourceFiber.lanes |= lane;
  
  let node = sourceFiber;
  let parent = sourceFiber.return;
  
  while (parent !== null) {
    // 标记父节点的childLanes
    parent.childLanes |= lane;
    
    // 继续向上遍历
    node = parent;
    parent = parent.return;
  }
  
  // 返回根节点
  if (node.tag === HostRoot) {
    return node.stateNode;
  }
  
  return null;
}

调试和开发工具

Fiber树的调试信息

// 获取Fiber节点的调试信息
function getFiberDescription(fiber) {
  return {
    tag: getTagName(fiber.tag),
    type: fiber.type ? fiber.type.name || fiber.type : null,
    key: fiber.key,
    state: fiber.memoizedState,
    props: fiber.memoizedProps,
    lanes: formatLanes(fiber.lanes),
    childLanes: formatLanes(fiber.childLanes)
  };
}

// React DevTools中的Fiber面板
// 可以查看完整的Fiber树结构和状态信息

实战：简易Fiber实现

// 简易Fiber实现示例
class MiniFiber {
  constructor(type, props) {
    this.type = type;
    this.props = props;
    this.dom = null;
    this.child = null;
    this.sibling = null;
    this.return = null;
    this.alternate = null;
    this.effectTag = null;
  }
}

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' ? child : createTextElement(child)
      )
    }
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: []
    }
  };
}

// 更多实现细节...

Fiber架构的未来发展

并发特性的扩展

useTransition：管理并发更新的过渡状态
useDeferredValue：延迟某些值的更新
Offscreen：预渲染和缓存组件

服务器组件（Server Components）

// 服务器组件的概念
async function ServerComponent() {
  // 在服务器端执行
  const data = await fetchData();
  return <div>{data}</div>;
}

// 客户端使用
function ClientComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ServerComponent />
    </Suspense>
  );
}