javascript - 什么是虚拟 DOM？

Question

最近，我看了 Facebook 的 React框架。它使用了一个名为“虚拟 DOM”的概念，我当时并没有真正理解它。

什么是虚拟 DOM？有什么优势？

Answer 1

React 创建一棵代表 DOM 一部分的自定义对象树。例如，它不是创建一个包含 UL 元素的实际 DIV 元素，而是创建一个包含 React.ul 对象的 React.div 对象。它可以非常快速地操作这些对象，而无需实际接触真实的 DOM 或通过 DOM API。然后，当它呈现一个组件时，它会使用这个虚拟 DOM 来确定它需要对真实 DOM 做些什么才能让两棵树匹配。

您可以将虚拟 DOM 想象成一个蓝图。它包含构建 DOM 所需的所有细节，但由于它不需要进入真实 DOM 的所有重量级部分，因此可以更轻松地创建和更改它。