基础知识 - HTML DOM 与虚拟 DOM

HTML DOM 很贵

每个网页在内部表示为对象树。该表示称为文档对象模型。此外，它是一个语言中立的接口，允许编程语言（如 JavaScript）访问 HTML 元素。

换一种说法

HTML DOM 是如何获取，更改，添加或删除 HTML 元素的标准。

但是，那些 DOM 操作非常昂贵。

虚拟 DOM 是一种解决方案

因此，React 的团队提出了抽象 HTML DOM 并创建自己的 Virtual DOM 的想法，以便计算我们需要在 HTML DOM 上应用的最小操作数，以复制应用程序的当前状态。

Virtual DOM 可以节省不必要的 DOM 修改时间

究竟怎么样？

在每个时间点，React 都将应用程序状态表示为 Virtual DOM。每当应用程序状态发生变化时，这些都是 React 为优化性能而执行的步骤

1. 生成一个新的 Virtual DOM ，它代表我们应用程序的新状态

2. 比较旧的 Virtual DOM（代表当前的 HTML DOM）与新的 Virtual DOM

3. 基于 2.找到将旧虚拟 DOM（代表当前 HTML DOM）转换为新虚拟 DOM 的最小操作数

• 要了解更多信息 - 阅读 React 的 Diff 算法

4. 找到这些操作后，它们将映射到等效的 HTML DOM 操作中

• 记住， Virtual DOM 只是 HTML DOM 的抽象，它们之间存在同构关系

5. 现在，已找到并转移到其等效 HTML DOM 操作的最小操作数现在直接应用于应用程序的 HTML DOM ，从而节省了不必要地修改 HTML DOM 的时间。

注意：应用于 Virtual DOM 的操作很便宜，因为 Virtual DOM 是一个 JavaScript 对象。