深入理解 React Fiber 架构

为什么需要 Fiber？

React 15 的调和过程是同步递归的，一旦开始就无法中断，导致长任务阻塞主线程，页面出现卡顿。

Fiber 的核心思想

Fiber 将渲染工作拆成小单元，利用浏览器空闲时间（requestIdleCallback）逐步执行，从而让出主线程给更高优先级的任务。

三个关键阶段

1. Reconciliation（协调）：对比新旧虚拟 DOM，生成副作用列表。
2. Commit（提交）：将副作用一次性同步应用到真实 DOM。
3. Scheduling（调度）：根据优先级决定何时执行哪个工作单元。

时间切片

function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 1) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  requestIdleCallback(workLoop);
}

小结

Fiber 让 React 具备了"可中断、可恢复、可优先级排序"的能力，是并发模式（Concurrent Mode）的基础。