跳到主要内容

React Fiber架构

面试速答​

  • 以下内容以 React 18 为准。
  • Fiber 不是一个单独功能，而是 React 16 之后的 核心重写架构。
  • 它既是一种数据结构，也是调度执行模型。
  • 它解决的核心问题是：让 React 更新可以拆分、暂停、恢复、按优先级处理，而不是一口气同步走到底。

核心理解​

1. Fiber 是什么​

可以把每个 Fiber 节点理解成“一个组件对应的工作单元”，里面会记录：

  • 组件类型
  • props / state
  • 父子兄弟关系
  • 要做的副作用标记

整棵 Fiber 树就是 React 当前 UI 的内部工作树。

2. 为什么需要 Fiber​

早期 React 递归更新时，一旦开始就很难中断。页面大了之后，长任务会阻塞主线程，输入和动画容易卡顿。

Fiber 的思路是把更新拆成很多小任务，让 React 有机会：

  • 中途让出控制权
  • 先处理高优先级更新
  • 延后低优先级更新

3. Fiber 和 React 18 的关系​

React 18 的并发渲染、过渡更新、自动批处理等能力，底层都建立在 Fiber 这套调度基础之上。

两个关键阶段​

1. Render 阶段​

这一阶段主要做计算：

  • 根据更新生成 workInProgress Fiber 树
  • 比较新旧节点
  • 收集副作用标记

特点是：可以被中断，不一定立即提交。

2. Commit 阶段​

这一阶段主要做执行：

  • 更新 DOM
  • 执行 ref
  • 执行 layout/effect 相关逻辑

特点是：不能中断，必须一次完成。

还要知道的几个点​

1. 双缓存树​

React 通常同时维护两棵树：

  • current：当前界面对应的 Fiber 树
  • workInProgress：正在计算的新树

计算完成后再把 workInProgress 切成 current。

2. 优先级​

React 18 内部用更细的优先级模型管理更新，不同更新不会一视同仁。

例如：

  • 输入框输入通常优先级高
  • 列表筛选、页面切换中的非关键更新可以低一些

3. 并发不是多线程​

Fiber 仍然跑在浏览器主线程上，只是 React 更会“安排顺序”和“切片执行”。

典型题标准答法​

问：Fiber 解决了什么问题？​

答：它把 React 更新从“不可中断的递归过程”改造成了“可拆分、可调度的任务系统”，从而支持优先级控制和更平滑的交互体验。

问：Fiber 和虚拟 DOM 的关系是什么？​

答：虚拟 DOM 更像 UI 描述结果，Fiber 是 React 内部用于调度和执行更新的节点结构。两者相关，但不是一个概念。

易错点​

  • 把 Fiber 说成“更快的 Diff 算法”。
  • 把并发渲染说成浏览器多线程并行。
  • 只会背 render/commit，不知道它为什么要分两阶段。

速记要点​

  • Fiber = 数据结构 + 调度模型。
  • Render 可中断，Commit 不可中断。
  • React 18 的并发能力建立在 Fiber 之上。