FrontEnd Interview

Appearance

01深入理解React Fiber算法：从卡顿根源到性能救赎 ​

引言：为什么React需要一场"渲染革命"？ ​

用过React的开发者可能都遇到过这样的场景：当页面包含大量列表或复杂组件时，点击按钮、输入文字会出现明显卡顿，甚至页面暂时" 冻结"。这不是你的代码写得不好，而是React早期渲染机制的"先天缺陷"。

在React 16之前，渲染过程是同步且不可中断的递归过程。想象一下：当你要渲染一个有1000个节点的组件树时，React会像" 一口气跑马拉松"一样，从根节点开始递归遍历所有子节点，计算差异并更新DOM。这个过程一旦开始，就会霸占JavaScript主线程，期间浏览器无法处理用户输入、动画帧等关键任务——这就是卡顿的根源。

为了解决这个问题，React团队在2017年发布的v16版本中，彻底重构了渲染引擎，推出了Fiber架构 。这篇文章将从问题本质出发，一步步揭开Fiber算法的工作原理，带你理解它如何让React从"卡顿王"变成"性能标兵"。

一、Fiber算法的核心设计目标：给渲染"踩刹车"的能力 ​

Fiber的核心目标可以用一句话概括：让React的渲染过程从"不可中断的递归"变成"可中断、可恢复、带优先级的任务序列" 。具体要解决三个关键问题：

  1. 避免栈溢出：早期递归渲染时，深层组件树会导致调用栈过深，直接触发Maximum call stack size exceeded错误（比如1000层嵌套组件）。

  2. 支持任务中断与恢复：允许渲染过程在任意时刻暂停，优先处理用户输入、动画等紧急任务，之后再从暂停处继续执行。

  3. 实现任务优先级调度：给不同类型的更新（如用户输入>动画>普通渲染）分配优先级，确保高优先级任务优先完成。

举个生活例子：传统渲染像"必须一口气做完作业才能吃饭"，而Fiber像" 做20分钟作业，看看有没有急事（比如电话响了），处理完再继续做作业"——灵活性大幅提升。

二、Fiber的本质：不只是"纤维"，更是"工作单元" ​

Fiber这个词直译是"纤维"，但在React中，它代表一个最小的工作单元，同时也是一种链表结构的数据结构。

2.1 为什么用"链表"替代"递归栈"？ ​

早期React用递归处理组件树，递归的问题在于：一旦开始就无法暂停，调用栈由JavaScript引擎管理，开发者无法干预。

Fiber的解决方案是：用链表结构重新定义组件树的遍历方式。每个Fiber节点对应一个组件，节点间通过指针关联（类似链表的next ），这样就能手动控制遍历过程——想停就停，想继续就继续。

2.2 Fiber节点的核心结构（简化版） ​

每个Fiber节点是一个JavaScript对象，包含组件信息、DOM关联和链表指针，关键属性如下：

javascript
const fiberNode = {
    // 1. 组件相关信息
    type: 'div', // 组件类型（如'div'、FunctionComponent、ClassComponent）
    props: {className: 'box'}, // 组件接收的props
    stateNode: document.createElement('div'), // 对应的DOM节点（仅原生组件有）

    // 2. 链表指针（核心！实现可中断遍历）
    return: parentFiber, // 指向父Fiber节点（类似"回到上一级"）
    child: firstChildFiber, // 指向第一个子Fiber节点（类似"进入下一级"）
    sibling: nextFiber, // 指向兄弟Fiber节点（类似"同一级的下一个"）

    // 3. 任务控制信息
    priority: 3, // 任务优先级（数字越小优先级越高）
    effectTag: 'UPDATE', // 需要执行的操作（如更新、删除、插入）
    expirationTime: 1691234567890, // 任务过期时间（超过则必须执行）
};

这些指针如何工作？看一个简单的组件树：

jsx
// 组件结构
<div>
    <p>Hello</p>
    <button>Click</button>
</div>

对应的Fiber链表关系如下：

  • div Fiber的child是p Fiber
  • p Fiber的sibling是button Fiber
  • p Fiber和button Fiber的return都是div Fiber

通过child->sibling->return的顺序，就能遍历整个组件树，且这个过程完全由React控制，随时可以暂停。

三、Fiber树与DOM树："设计图"与"实物"的关系 ​

Fiber树和DOM树是一一映射的关系：

  • DOM树是浏览器中真实的节点树（"实物"）
  • Fiber树是React内存中维护的"设计图"，记录了每个DOM节点的类型、属性、状态和关系

这种映射的核心价值是复用DOM节点 。比如当组件props变化时，React会先对比新旧Fiber节点（而不是直接操作DOM），如果只是属性变化，就复用原DOM节点并更新属性，避免昂贵的DOM创建/删除操作。

举个例子：当<p>Hello</p>变成<p>Hi</p>时，Fiber树会发现"p节点类型没变，只是内容变了"，于是直接更新原p标签的文本，而不是删除旧p再创建新p。

四、双缓存机制：用"备胎"避免渲染闪烁 ​

想象一个场景：如果你正在画一幅画，画到一半时有人来看，你肯定不想让他看到半成品。Fiber的双缓存机制 就是为了解决这个问题——始终用"成品"展示给用户，同时在后台悄悄画"新成品"。

React维护了两棵Fiber树：

  • current树：当前显示在页面上的Fiber树（"正在展示的画"）
  • workInProgress树：正在内存中构建的新Fiber树（"后台画的新画"）

双缓存的工作流程： ​

  1. 初始渲染时，React创建current树并渲染到DOM
  2. 当状态更新（如setState），React以current树为模板，在内存中构建workInProgress树
  3. 构建完成后，React将current指针指向workInProgress树（"切换展示新画"）
  4. 旧的current树被丢弃，等待垃圾回收

这种机制确保用户始终看到完整的UI，避免了"半成品UI闪烁"的问题。就像电影拍摄时，观众看到的是已剪辑好的成片，而导演在后台拍新的镜头。

五、工作循环：Fiber的"三大工作阶段" ​

Fiber的渲染过程被拆分为三个阶段，每个阶段各司其职，且前两个阶段可中断。

5.1 阶段一：调度（Scheduler）——"决定谁先干活" ​

Scheduler的核心任务是给任务分配优先级，并决定何时执行。React定义了多种优先级（从高到低）：

  • 同步优先级（如用户输入）：必须立即执行，不能中断
  • 用户阻塞优先级（如点击事件）：高优先级，尽快执行
  • 动画优先级（如过渡动画）：需要在下次重绘前完成
  • 低优先级（如网络请求后的列表更新）：可以延迟执行

如何判断任务优先级？
React用expirationTime（过期时间）表示任务紧急程度：时间越近，优先级越高。当一个任务的过期时间小于当前时间，就必须立即执行。

5.2 阶段二：协调（Reconciliation）——"找差异" ​

协调阶段是Fiber的核心，主要做两件事：

  1. 遍历workInProgress树，对比current树，找出需要更新的节点（Diff算法）
  2. 给需要更新的节点打上"操作标签"（如UPDATE、DELETION、PLACEMENT）

这个阶段可以被高优先级任务中断。比如正在协调列表渲染时，突然来了用户输入，React会暂停当前协调，先处理输入，之后再从暂停处继续。

协调阶段的遍历逻辑（简化版代码）： ​

javascript
function workLoop(deadline) {
    let shouldYield = false; // 是否需要让出主线程
    // 从根节点开始处理
    while (nextUnitOfWork && !shouldYield) {
        // 处理当前Fiber节点（计算差异、打标签）
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
        // 检查是否超时（如果剩余时间<1ms，就暂停）
        shouldYield = deadline.timeRemaining() < 1;
    }
    // 如果还有未完成的任务，请求下一次空闲时间继续
    if (nextUnitOfWork) {
        requestIdleCallback(workLoop);
    } else {
        // 协调完成，进入提交阶段
        commitRoot();
    }
}

// 处理单个Fiber节点
function performUnitOfWork(fiber) {
    // 1. 计算当前节点的新状态（如执行函数组件、更新类组件state）
    // 2. 生成子Fiber节点（如果需要）
    // 3. 标记需要执行的操作（如effectTag = 'UPDATE'）

    // 确定下一个工作单元（先找子节点，没有则找兄弟节点，再没有则返回父节点）
    if (fiber.child) {
        return fiber.child;
    }
    let next = fiber;
    while (next) {
        if (next.sibling) {
            return next.sibling;
        }
        next = next.return;
    }
    return null; // 遍历完成
}

这段代码的核心是workLoop函数：它像"流水线工人"一样，每次处理一个Fiber节点（nextUnitOfWork），处理完后判断是否需要暂停（ shouldYield），确保不霸占主线程。

5.3 阶段三：提交（Commit）——"真干活" ​

提交阶段的任务是将协调阶段标记的差异应用到真实DOM。这个阶段不可中断（否则会导致DOM不一致），但由于协调阶段已经计算好所有差异，提交阶段通常很快。

提交阶段分三步：

  1. before mutation：执行DOM操作前的准备（如调用getSnapshotBeforeUpdate）
  2. mutation：执行DOM操作（插入、删除、更新节点）
  3. layout：DOM更新后，执行收尾工作（如调用componentDidMount、useEffect回调）

六、时间切片（Time Slicing）：给主线程"喘口气"的机会 ​

时间切片是Fiber实现"可中断渲染"的核心技术，它的原理是利用浏览器的空闲时间执行任务，超过时间限制就暂停。

为什么需要时间切片？ ​

浏览器每秒刷新60次（约16ms/帧），如果JavaScript任务占用时间超过16ms，就会阻塞渲染，导致动画卡顿。时间切片确保每个任务单元的执行时间不超过5ms（预留时间给浏览器渲染）。

实现原理：模拟requestIdleCallback ​

浏览器提供了requestIdleCallbackAPI，允许在浏览器空闲时执行回调，但它的兼容性和触发频率不稳定。React自己实现了类似机制，核心逻辑如下：

javascript
// 简化版时间切片实现
let taskQueue = []; // 任务队列

// 模拟requestIdleCallback
function scheduleCallback(priorityLevel, callback) {
    // 将任务加入队列（按优先级排序）
    taskQueue.push({priorityLevel, callback});
    // 用setTimeout模拟浏览器空闲时间（实际React用更复杂的调度逻辑）
    setTimeout(flushWork, 0);
}

// 执行任务
function flushWork() {
    const currentTime = performance.now();
    // 取出最高优先级任务
    const task = taskQueue.shift();
    if (task) {
        // 执行任务，传入截止时间（当前时间+5ms）
        const deadline = {timeRemaining: () => 5 - (performance.now() - currentTime)};
        const shouldYield = task.callback(deadline);
        // 如果任务没完成且没超时，重新加入队列
        if (!shouldYield) {
            taskQueue.unshift(task);
            setTimeout(flushWork, 0);
        }
    }
}

// 使用示例：调度一个低优先级任务
scheduleCallback(3, (deadline) => {
    let done = false;
    while (!done && deadline.timeRemaining() > 0) {
        // 执行部分工作（如处理一个Fiber节点）
        done = processSomeWork();
    }
    return done; // 返回是否完成
});

这段代码的核心是：将长任务拆成多个短任务，每个任务执行不超过5ms，确保浏览器有时间处理渲染和用户交互。

七、Fiber算法如何提升性能？ ​

Fiber通过三个核心机制解决了传统渲染的痛点：

  1. 避免主线程阻塞：时间切片让渲染任务不会霸占主线程，用户输入、动画等关键操作能及时响应。

  2. 优先级调度：高优先级任务（如点击按钮）可以打断低优先级任务（如列表渲染），确保用户操作"即时反馈"。

  3. 减少无效计算：双缓存和Diff算法减少了不必要的DOM操作，链表遍历替代递归减少了栈溢出风险。

实际效果是：复杂页面的交互响应速度提升30%以上，动画帧率更稳定，深层组件树也不会再出现栈溢出错误。

总结：Fiber是React性能的"救赎者" ​

Fiber算法不是一个单一的技术，而是任务分解、优先级调度、双缓存机制的结合体。它的核心思想是"**把不可控的递归变成可控的任务序列 **"，让React从"一口气跑完"变成"边跑边看，急事优先"。

理解Fiber不仅能帮你写出更优的React代码（比如合理设计组件拆分、避免不必要的重渲染），更能让你明白" 性能优化的本质是对资源调度的精细化控制"。

下一次当你用React写出流畅的交互时，不妨想想背后Fiber算法的默默付出——是它让React从"卡顿王"变成了如今的"性能标兵"。