标准答案

  1. 早期 React 更新更接近递归同步遍历,复杂组件树更新可能长时间占用主线程。
  2. Fiber 把组件树中的每个节点表示为 Fiber 节点,并把渲染工作拆成一个个工作单元。
  3. 有了 Fiber,React 可以暂停、继续、丢弃或重新开始渲染工作,并按优先级调度更新。
  4. Fiber 也让渲染阶段和提交阶段分离:渲染阶段可以计算和比较,提交阶段再真正修改 DOM。
  5. 它是 React 18 并发能力、优先级调度和增量渲染心智的底层基础。

题目解析

这道题不需要深入源码字段,但要讲清楚 Fiber 解决了“同步递归更新不可中断”的问题。

Fiber 不是单纯的数据结构改名,它让 React 能把更新拆成可调度任务。

理解 Fiber 后,React 的 render phase 可以被中断、commit phase 必须一次完成这些概念会更自然。

代码示例

可以把 Fiber 简化理解成组件树节点对应的工作单元。

TypeScript
type FiberNode = {
  type: unknown
  child: FiberNode | null
  sibling: FiberNode | null
  return: FiberNode | null
  pendingProps: unknown
  memoizedProps: unknown
}

常见误区

  • 把 Fiber 只理解成虚拟 DOM 的新名字。
  • 只说 Fiber 提升性能,不说明可中断、优先级和调度能力。
  • 认为 Fiber 会让所有渲染自动变快,忽略业务组件自身的渲染成本。

作者信息