React Diff算法与Virtual DOM核心概念相关疑问

你此前对Virtual DOM运行逻辑的基础认知是准确的：Virtual DOM是存在于内存中的真实DOM轻量映射副本，React通过它减少不必要的真实DOM操作实现性能优化；当组件state或props变化时会生成新的Virtual DOM，经Diff算法计算差异后通过协调流程完成真实DOM的最小粒度更新。

针对你提出的两个疑问，具体说明如下：

1. React对Virtual DOM的持有与回收逻辑 #

• 稳定运行状态下，React内存中只会长期持有1份Virtual DOM，也就是和当前页面已渲染真实DOM完全对应的current树。
• 当更新触发、需要生成新Virtual DOM时，内存中会短暂存在两份Virtual DOM：旧的current树，以及重新构建的workInProgress（工作中）树，这也是Diff算法能够对比新旧节点差异的前提。
• 等Diff计算完成、协调流程落地所有真实DOM更新后，旧的current树会失去所有引用，被JavaScript引擎的垃圾回收机制自动回收清理，不会长期占用内存；此时之前构建的workInProgress树会成为新的current树，等待下一次更新触发。

2. Diff算法的实际对比对象 #

• 你看到的“Diff对比真实DOM和Virtual DOM”的说法是错误的，属于典型的概念混淆。真实DOM的读取、属性查询性能开销非常高，如果Diff阶段需要遍历真实DOM做对比，Virtual DOM的性能优势会几乎消失。
• React标准Diff流程的对比对象，始终是内存中短暂共存的新旧两份Virtual DOM：也就是旧的current树和新生成的workInProgress树。算法会逐层对比同层级节点的类型、属性、子节点差异，把需要更新的操作整理成副作用队列，最终协调阶段只针对队列里记录的差异点操作真实DOM，全程不需要遍历全量真实DOM做比对。
• 错误说法的来源是把“最终将差异同步到真实DOM”的收尾步骤，错当成了Diff阶段的对比行为。

内容的提问来源于stack exchange，提问作者hongkongbboy