React是否采用两个Virtual DOM执行diff对比操作？

首先直接给结论：React并没有长期维护两个独立的Virtual DOM树，你提到的"两个Virtual DOM"其实是渲染更新过程中的前后快照，而非常驻的两个完整结构。

具体来说，React的更新流程是这样的：

• 当组件的状态（state）或属性（props）发生变化时，React会调用组件的render()方法，生成一棵新的Virtual DOM树（本质是描述UI结构的轻量JS对象）。
• 随后，React会将这棵新树与当前挂载到真实DOM上的旧Virtual DOM树（也就是上一次更新后保留的快照）进行diff算法对比，精准找出需要变更的最小单元。
• 最后，React只把这些差异部分同步到真实DOM中，避免了全量渲染真实DOM带来的性能损耗。

需要明确的是：更新完成后，新的Virtual DOM树会替换旧的，成为下一次更新对比的基准。也就是说，React在同一时间只维护一棵有效的Virtual DOM树，另一个是更新时临时生成的对比用快照，并非长期存在两个独立的Virtual DOM。

所以结论是：真实DOM只有一个，Virtual DOM是更新周期中临时生成的前后快照，不存在"三个DOM"的说法——React不会同时保留两个完整的Virtual DOM树，只有当前有效的那一棵，加上更新时临时创建的新树用于对比。

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