虚拟DOM - React的骨干

Posted 2021-04-13 Web前端精髓

：点上面关注免费学习前端知识！

---

我们赞赏React在处理页面更新，数据绑定等方面的表现。但是为了实现这种性能，幕后发生了很多事情。其中一个影响因素是虚拟DOM。

现在，有了这个DOM的概念，现在你告诉我有这个全新的东西叫虚拟DOM。到底是怎么回事？。在我们进一步研究之前，让我们先了解一下实际的DOM。

什么是DOM？

在前端Web开发文档对象模型或DOM中，它是众所周知的，它是一个html文档的树形表示，其中树的每个节点都是html元素，而且html元素的父子关系也保存在树中。这个DOM结构为我们提供了一种遍历DOM节点并进行更改的方法。javascript提供了一个API来操纵DOM，这被jQuery进一步抽象和简化了。

Javascript提供了一个API，并且jQuery提供了一个简化的API，如果这些API在React和其他前端框架需要的话。为了回答这个问题以及产生虚拟DOM的因素，我们必须了解DOM缺点。

DOM的缺点

是的，DOM对于简单的静态网站和UI更新很少的网站来说非常棒。但随后当人们开始采用更多的页面交互，事件驱动的方法来创建网站时，他们开始看到DOM的缺陷。

1. DOM突变的代价

与其他Javascript操作相比，更新DOM是一个非常慢的操作。无论何时您想要更新或添加DOM，都必须找到要更新的DOM节点或找到新节点必须插入的位置。在DOM节点数量较少的小型网站中，这不是问题。但是，如果大型网站具有大量DOM节点并且更新成本会成为性能问题。另外，当DOM更新浏览器重新绘制DOM节点时，会使其耗费更多时间。

2.无效更新

在计算确切需要更新的时候，DOM非常低效。有时它可能会更新超过必要的内容。例如，我们来考虑一个场景。您有一个从一组值生成<ul>的<li>项目列表。现在，当数组中的一个值发生变化时，整个列表将被重新渲染，这是不必要的，因为只有一个项目被更新。

通常，只要发生单个DOM突变调用，就会发生这些步骤：

1. 遍历DOM直到必须插入或更新节点的位置。

2. 更新DOM节点或添加它。

3. 重新计算位置和CSS。

4. 再遍历并重新绘制页面上的节点。

这两点加上单页应用程序（SPA）的兴起，这些应用程序通常具有大量的DOM节点，DOM突变和倾听网站变化，因此人们想出了框架来绕过这些性能问题。

虚拟DOM

首先，让我说这个React没有发明虚拟DOM，他们只是在性能方面做得更好。它的核心意义上的虚拟DOM只是一个Javascript对象，其中包含必须在真实DOM中呈现的节点列表，并且更新此Javascript对象中的值比更新实际DOM树要快得多。

基本上，如果DOM是实际的建筑，那么虚拟DOM就是建筑的蓝图。核心思想是修改蓝图总是比实际建筑容易和快速。

实现虚拟DOM的两种方式是：

1. 脏检查：涉及定期检查组件是否有变化。

2. Observable：其中涉及通过侦听器侦听更改以找出需要更新的组件。

据猜测，React使用后一种实现方式，这是反应单向数据绑定的主要原因之一，它的性能惊人。

哇，这一切都很好。但是它如何在React中实现？

同步虚拟和真实的DOM

基于组件更新更新DOM节点的过程通常由ReactDOM库完成。以下情况通常发生在这个过程中：

1. 版本比较

2. 批量更新真实的DOM

版本比较

当发生更新setState()时，会从头开始创建新的虚拟DOM树（不要担心它很快，因为它只是一个Javascript对象）。差异化算法比较旧的和新的虚拟DOM树以找到脏的组件。一旦找到所有脏的组件。然后确定更新真实DOM的最小步数。这种差异化算法在某些假设下工作，以便使它们快速，因为React使用启发式方法来处理事情，这里我不会讨论，但如果您想知道可以访问React 的Reconciliation文档。

批量更新Real DOM

一旦识别出更新的步骤，ReactDOM将所有这些步都骤放入事件循环中。ReactDOM这些步骤，它只调用DOM的重绘作为最后一步。因此，一旦所有步骤都执行完毕，事件循环就会在整个过程中调用DOM重新绘制，只有在DOM重新绘制后才能实现更快的性能。当ReactDOM更新真正的DOM时，组件发生更新时，它将等待真正的DOM更新完成。

这就是React的虚拟DOM如何带来惊人的性能，这已经成为React的商标。因此，在创建React应用程序时，请将虚拟DOM的这些概念放在头脑中，以便利用React提供的性能提升，充分发挥其潜力。