虚拟 DOM：React 快速 DOM 更新背后的技术。

大家好，我很高兴能够开始一系列新的帖子，我将尝试解释编程世界中的各种概念。我们将涵盖从幂等和惯用术语到与库和框架相关的更具体概念的所有内容。今天，我们将深入探讨这样一个主题 - 虚拟 DOM.

如果您觉得这有帮助，请不要忘记点赞、分享和评论您希望我接下来介绍哪些主题。我们不要再浪费时间了，直接跳到虚拟 DOM！

注意：在我们继续之前，重要的是要了解虚拟 DOM 的概念并不是 React 独有的。其他 JavaScript 前端库，例如 Vue，也使用它来增强渲染性能。

DOM

DOM（文档对象模型）是使用节点或对象的 HTML 文档（或网页/Web 应用程序）的树状表示。 DOM 的设计使得前端库和框架 (javascript) 可以通过其 API 以编程方式与文档交互和操作文档。

为什么选择虚拟 DOM

虽然 DOM 提供了一种通过其 API 操作文档的有效方法，但当屏幕上有数千个元素时，性能可能会成为一个问题。这是因为 DOM 中的更新通常涉及销毁和重新创建整个子树。

这就是虚拟 DOM 发挥作用的地方。虚拟 DOM 是真实 DOM 的轻量级内存表示，允许快速有效地同步实际 DOM 的更改 - 这个过程称为协调。

这里要记住的关键事项是：

1. 虚拟 DOM 是 真实 DOM 的轻量级版本，这意味着它不具有真实 DOM 的所有属性，这使得它的使用效率更高。
2. 虚拟 DOM 存在于内存中，允许在将更改应用到真实 DOM 之前进行更快、更高效的操作。

考虑到这一点，使用 DOM API 的 JavaScript 库创建自己的虚拟 DOM 并操作它。他们仅在必要时更新 Real DOM，即使如此，也只需最少的操作。

React 中如何处理虚拟 DOM？

React JS 是 Facebook 开发的一个用于构建用户界面的流行库。由于其简单性，它获得了广泛的流行并在许多现代 Web 项目中使用。

与许多其他 JS 前端库一样，React 使用虚拟 DOM 的概念来有效管理应用程序中的重新渲染和更新。

React 使用比较算法以及协调技术来优化此过程。 （具体来说，ReactDOM 库 在幕后处理此问题。）

让我们一步步分解：

1. React 组件的 render() 函数

   • React 组件的 render() 函数首先使用 JSX 创建 React Element/Virtual DOM。
   • 它包含 Real DOM 对应物的轻量级版本和额外属性，例如 $$typeof、props，以促进高效比较。

2. 比较算法

   • 每当更新 React 组件时，就会创建一个新的 Virtual DOM，并开始比较过程。这是一个基于两个关键假设的 O(n) 启发式算法。
     1. 不同类型的元素会产生不同的树。
     2. 关键道具可用于跟踪哪些子元素在渲染之间保持一致。

2.1。 比较算法的步骤

• 当算法遇到两种不同类型的 DOM 元素：它将拆除旧的 Virtual DOM，并根据新元素的规范从头开始创建一个新的。
• 当React遇到相同类型的DOM元素时：它保留旧的DOM对象，只更新更改的属性。
• 对于 相同类型的 React 元素，React 会保持旧 DOM 对象完整并提供更新的 props。
• 处理子元素时，React 会迭代两组子元素（旧的虚拟 DOM 树和新创建的树），在存在差异的地方进行更新。

2.2。 为什么要使用钥匙？

如上一点所述，比较算法会迭代子列表并在必要时进行更改。如果您不使用子列表中的键，性能可能会受到影响，并且您可能会遇到意外的行为。

让我们看一下示例：

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

在上述场景中，算法实际上可以有效地处理修改。它查看每个索引子项并找到

apple

&

菠萝

两个列表中的内容相同，并且对它们没有任何作用，而

grape>仅出现在新列表中，因此将一个添加到旧列表中。

但是，我们想添加

葡萄

一开始。

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

这里，当算法看到

葡萄

时，其性能将会下降。代替

苹果

，

苹果

代替

菠萝

和一个新的

菠萝

在最后一个位置。从而重新创建 strach 中的所有元素。

为了解决这个性能瓶颈，React 团队使用了 Key，它是附加到列表子项的唯一 ID，算法可以使用它来确定该项是否可以完好无损，并且只需重新排序位置或需要重新创建。

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

现在，React 可以使用 Key 属性，并且在添加新子项时仅重新定位未更新的子项。

3) ReactDOM 的 render() 函数

最后调用 ReactDOM 的 render() 函数，它协调了新的 Virtual DOM 和 Real DOM 之间的差异。这使得有效地重新渲染 HTML 所需的操作最少。

结论

在本文中，我们探索了虚拟 DOM，这是许多前端库使用的一种技术，可以通过最少的 DOM 操作有效地处理数据和元素更改。我们还研究了 React 如何具体使用差异和协调过程来优化更新。

我希望这篇文章可以帮助您更好地了解虚拟 DOM 的工作原理。即使您熟悉这个概念，我也希望现在您知道什么是 Virtual DOM 以及它如何有助于创建优化的前端环境。

以上是虚拟 DOM：React 快速 DOM 更新背后的技术。的详细内容。更多信息请关注PHP中文网其他相关文章！