React底层：Fiber树与Virtual DOM的关系是什么？

先明确两个核心概念 #

• Virtual DOM：就是JSX编译后生成的React.createElement返回的JS对象，本质是对真实DOM的轻量描述，比如{ type: 'div', props: { children: '文本' } }。它只是纯数据结构，没有调度、更新的能力，仅用来定义UI应该是什么样。
• Fiber树：React在Virtual DOM基础上扩展出的调度核心结构。每个Fiber节点对应一个Virtual DOM节点，但额外增加了优先级、状态更新队列、节点关系指针、工作进度标记等调度相关属性——这些属性是React实现可中断更新的关键。

关于"两棵树"的误区澄清 #

你听到的两种说法，其实是React不同架构阶段的表述：

1. 更新前后的Virtual DOM对比：这是Fiber架构出现前的老逻辑，当时React会递归对比新旧Virtual DOM树找差异，但这种同步递归一旦遇到大型组件树，会直接阻塞主线程，导致页面卡顿。
2. 两棵Fiber树（Current + WorkInProgress）：这是现在React的实际实现：
   • Current Fiber Tree：对应当前屏幕上已渲染的UI，每个节点都和真实DOM绑定。
   • WorkInProgress Fiber Tree：是正在后台构建的新树，React会在这棵树上处理更新、计算差异，这个过程是可中断的（因为Fiber节点带调度属性）。当WorkInProgress树构建完成，React会快速切换它为Current树，完成UI更新。

两者的联动流程 #

每次触发更新（比如setState、useState更新）时：

1. 组件会重新渲染生成新的Virtual DOM对象。
2. React以这个新的Virtual DOM为数据源，去构建或更新WorkInProgress Fiber树——把Virtual DOM的UI描述映射到Fiber节点上，同时处理状态合并、差异计算。
3. 对比过程并非直接对比新旧Virtual DOM，而是在WorkInProgress Fiber树和Current Fiber树之间做"调和"（Reconciliation），利用Fiber的调度属性，React可以在这个过程中随时暂停、恢复，优先处理高优先级任务（比如用户输入）。

简单总结：Virtual DOM是UI的"设计图"，Fiber树是React用来"施工"的"进度管理表"——Fiber依赖Virtual DOM的设计信息，但额外提供了调度能力，让更新过程更流畅。现在React实际依赖的是两棵Fiber树做对比，而非直接对比新旧Virtual DOM。

内容的提问来源于stack exchange，提问作者HG.R Sanjayamal