React Fiber 架构是什么？它解决了什么问题？

React 15 的问题

React 15 使用递归方式更新组件树（Stack Reconciler），一旦开始就无法中断，如果组件树很深，长任务会阻塞主线程，导致掉帧。

Fiber 是什么

Fiber 是 React 16 引入的新架构，将组件树更新工作拆分为可中断、可恢复的小任务（Fiber 节点）。

Fiber 节点

每个组件对应一个 Fiber 节点，包含：

{
  type: 'div',              // 组件类型
  key: null,
  child: Fiber | null,      // 第一个子节点
  sibling: Fiber | null,    // 下一个兄弟节点
  return: Fiber | null,     // 父节点
  pendingProps: {},         // 待处理的 props
  memoizedProps: {},        // 上次使用的 props
  memoizedState: {},        // 上次的 state
  updateQueue: {},          // 更新队列
  flags: 0,                 // 副作用标记（插入/更新/删除）
  alternate: Fiber | null,  // 指向上一次的 Fiber（双缓冲）
}

工作流程

1. Render Phase（可中断）
   - 遍历 Fiber 树
   - 计算变更（Diff）
   - 标记副作用（flags）
   - 使用 requestIdleCallback / MessageChannel 分片执行

2. Commit Phase（不可中断）
   - 将变更应用到 DOM
   - 执行生命周期/useEffect

链表结构

Fiber 树采用链表结构（child + sibling + return），而非树形递归，可以随时暂停和恢复：

      App
     / 
   div
  / h1   ul
    / |   li  li  li

遍历顺序：App → div → h1 → (回到 div) → ul → li → li → li

时间分片（Time Slicing）

// 简化的调度逻辑
function workLoop(deadline) {
  let shouldYield = false
  while (nextFiber && !shouldYield) {
    nextFiber = performUnitOfWork(nextFiber)
    shouldYield = deadline.timeRemaining() < 1
  }
  if (nextFiber) {
    requestIdleCallback(workLoop)
  }
}
requestIdleCallback(workLoop)

React 18 并发特性

基于 Fiber 架构，React 18 引入：

关键意义

同分类其他题目

›React 的虚拟 DOM 是什么？它解决了什么问题？›React Hooks 有哪些常用的？各自的作用是什么？›useEffect 和 useLayoutEffect 的区别？›useEffect 的依赖数组为空、有值、不传分别是什么效果？