反应JS |虚拟 DOM

DOM： DOM 代表“文档对象模型”。简单来说，它是网页或网络应用程序中存在的 HTML 元素的结构化表示。 DOM 代表应用程序的整个 UI。 DOM 表示为树数据结构。它包含 Web 文档中存在的每个 UI 元素的节点。它非常有用，因为它允许 Web 开发人员通过 JavaScript 修改内容，而且它采用结构化格式也很有帮助，因为我们可以选择特定的目标，并且所有代码都变得更容易使用。如果您想了解有关 DOM 的更多信息，请访问此链接。
更新 DOM：如果你对 JavaScript 有一点了解，那么你可能已经看到有人使用 'getElementById()' 或 'getElementByClass()' 方法来修改 DOM 的内容。每次应用程序的状态发生变化时，DOM 都会更新以反映 UI 中的变化。虽然这样做不是问题并且工作正常，但是考虑一个包含大量节点的 DOM 的情况，并且所有这些 Web 元素都有不同的样式和属性。由于 DOM 本身被表示为一棵树，因此在这里更新树并不是一项昂贵的操作，事实上我们有很多关于树的算法来使更新更快。事实证明，每次更新 DOM 时，更新后的元素及其子元素都必须再次渲染以更新页面的 UI，这是代价高昂的。就像这样，每次有组件更新时，都需要更新 DOM，并且必须重新渲染 UI 组件。
例子：

javascript

// Simple getElementById() method
document.getElementById('some-id').innerValue = 'updated value';

在控制台或 JavaScript 文件中编写上述代码时，会发生以下情况：

浏览器解析 HTML 以找到具有此 ID 的节点。
它删除此特定元素的子元素。
使用“更新的值”更新元素（DOM）。
重新计算父节点和子节点的 CSS。
更新布局。
最后，遍历树并将其绘制在屏幕（浏览器）显示上。

所以我们现在知道，更新 DOM 不仅涉及更改内容，还涉及到更多内容。重新计算 CSS 和更改布局也涉及复杂的算法，它们确实会影响性能。所以 React 有一种不同的方法来处理这个问题，因为它使用了被称为 Virtual DOM 的东西。

Virtual DOM： React 使用 Virtual DOM 存在，它就像实际 DOM 的轻量级副本（DOM 的虚拟表示）。因此，对于原始 DOM 中存在的每个对象，React Virtual DOM 中都有对应的对象。完全一样，只是没有直接改变文档布局的权力。操作 DOM 很慢，但操作虚拟 DOM 很快，因为屏幕上没有任何内容。因此，每次应用程序的状态发生变化时，都会首先更新虚拟 DOM 而不是真实 DOM。您可能仍然想知道，“我们不是又在做同样的事情并加倍工作吗？这怎么可能更快？”阅读下文以了解使用虚拟 DOM 将如何加快速度。

Virtual DOM 如何真正让事情变得更快：当向应用程序添加任何新内容时，就会创建一个虚拟 DOM，并将其表示为一棵树。应用程序中的每个元素都是此树中的一个节点。因此，每当任何元素的状态发生变化时，都会创建一个新的 Virtual DOM 树。然后将这个新的 Virtual DOM 树与之前的 Virtual DOM 树进行比较，并记下更改。在此之后，它会找到对真实 DOM 进行这些更改的最佳方法。现在只有更新的元素会再次呈现在页面上。

Virtual DOM 如何帮助 React：在 React 中，一切都被视为一个组件，无论是功能组件还是类组件。一个组件可以包含一个状态。每次我们更改 JSX 文件中的某些内容时，或者简单地说，只要任何组件的状态发生更改，react 都会更新它的虚拟 DOM 树。虽然这听起来可能无效，但成本并不高，因为更新虚拟 DOM 并不需要太多时间。 React 每次维护两个 Virtual DOM，一个包含更新后的 Virtual DOM，一个是这个更新后的 Virtual DOM 的更新前版本。现在它将更新前的版本与更新的虚拟 DOM 进行比较，并找出 DOM 中究竟发生了哪些变化，比如哪些组件发生了变化。将当前虚拟 DOM 树与前一个进行比较的过程称为'diffing' 。一旦 React 发现到底发生了什么变化，它就会只在真实的 DOM 上更新这些对象。 React 使用称为批量更新的东西来更新真实的 DOM。这只是意味着对真实 DOM 的更改是分批发送的，而不是针对组件状态的单个更改发送任何更新。我们已经看到 UI 的重新渲染是最昂贵的部分，React 通过确保 Real DOM 接收批量更新以重新渲染 UI 来最有效地做到这一点。将更改转换为真实 DOM 的整个过程称为协调

这显着提高了性能，这也是 React 及其 Virtual DOM 深受各地开发人员喜爱的主要原因。