标准答案
- 早期 React 更新更接近递归同步遍历,复杂组件树更新可能长时间占用主线程。
- Fiber 把组件树中的每个节点表示为 Fiber 节点,并把渲染工作拆成一个个工作单元。
- 有了 Fiber,React 可以暂停、继续、丢弃或重新开始渲染工作,并按优先级调度更新。
- Fiber 也让渲染阶段和提交阶段分离:渲染阶段可以计算和比较,提交阶段再真正修改 DOM。
- 它是 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 会让所有渲染自动变快,忽略业务组件自身的渲染成本。