理解虚拟 DOM 的最佳示例

虚拟 DOM 是一种编程概念，其中 UI 的理想或“虚拟”表示保存在内存中并与“真实” DOM 同步。

因此，通常提供虚拟 DOM 功能的库和框架会实现 UI 节点的虚拟树，并且在更改或重新渲染过程中，它会使用虚拟 DOM 的旧节点树检查新节点树，然后调用浏览器 DOM API 仅重新渲染已更改的部分。

让我们通过实际的例子来理解这一点。

上面的示例只是重新渲染了带有 root ID 的 div 元素中的内容。因此，如果我们在浏览器的开发者工具中查看，我们会看到类似这样的内容

所以，整个根内容每次都会重新渲染。
现在让我们用 React 来实现同样的效果。

现在是时候检查浏览器的开发人员工具中的元素渲染并看看我们得到了什么......

想必你已经在上面的例子中看到了虚拟 DOM 的魔力。像 Vue 和 React 这样的框架和库都使用虚拟 DOM 来实现这个目的。

虚拟 DOM 为我们提供了优化的更新过程，让我们可以自由地不去考虑太多渲染过程（即使我们重新渲染整个 UI，它实际上也会重新渲染更改），但总是有代价的，这里的代价是存储 dom 副本并在每次重新渲染时检查差异的高内存消耗。