如果您正在使用React或学习React，那么您一定听说过“虚拟DOM”一词。现在什么是虚拟DOM？为什么React使用它？
真实DOM
首先，DOM代表“文档对象模型”。DOM用简单的语言表示应用程序的UI。每当应用程序UI的状态发生变化时，DOM都会更新以表示该变化。现在，问题是经常操纵DOM影响性能，使其变慢。
是什么导致DOM操作缓慢？
DOM表示为树数据结构。因此，DOM的更改和更新很快。但是在更改之后，必须重新渲染已更新的元素及其子元素以更新应用程序UI。UI的重新渲染或重新绘制使它变慢。因此，您拥有的UI组件越多，DOM更新的成本就越高，因为每次DOM更新都需要重新渲染它们。
虚拟DOM
那就是虚拟DOM概念出现的地方，并且其性能要比真实DOM好得多。虚拟DOM只是DOM的虚拟表示。每当我们的应用程序状态更改时，虚拟DOM就会更新，而不是真实DOM。
好吧，您可能会问：“虚拟DOM是否与真实DOM所做的相同，这听起来像是双重工作？这比仅仅更新真实的DOM还要快吗？”
答案是虚拟DOM更快，更高效，这就是原因。
虚拟DOM如何更快？
将新元素添加到UI时，将创建表示为树的虚拟DOM。每个元素都是该树上的一个节点。如果这些元素中任何一个的状态改变，那么将创建一个新的虚拟DOM树。然后将该树与先前的虚拟DOM树进行比较或“差异化”。
完成此操作后，虚拟DOM将计算出最佳方法以对真实DOM进行这些更改。这样可以确保对实际DOM的操作最少。因此，降低了更新实际DOM的性能成本。
下图显示了虚拟DOM树和差异化过程。
虚拟DOM
红色圆圈表示已更改的节点。这些节点表示状态已更改的UI元素。然后计算虚拟DOM树的先前版本与当前虚拟DOM树之间的差异。然后重新渲染整个父子树以提供更新的UI。然后将此更新的树批量更新为真实的DOM。
React如何使用虚拟DOM
现在您对虚拟DOM是什么以及它如何对您的应用程序性能有所了解了，让我们了解一下React如何利用虚拟DOM。
在React中，每个UI块都是一个组件，每个组件都有一个状态。React遵循可观察的模式，并监听状态变化。当组件的状态改变时，React更新虚拟DOM树。虚拟DOM更新后，React然后将虚拟DOM的当前版本与虚拟DOM的先前版本进行比较。此过程称为“差异化”。
一旦React知道哪些虚拟DOM对象已更改，然后React就会在真实DOM中仅 更新那些对象。与直接操作真实DOM相比，这使性能好得多。这使React作为高性能JavaScript库脱颖而出。
简而言之，您可以告诉React您希望UI处于什么状态，并确保DOM匹配该状态。这里最大的好处是，作为开发人员，您将不需要知道如何在后台进行属性操纵，事件处理或手动DOM更新。
所有这些细节都是从React开发人员那里抽象出来的。您需要做的就是在需要时更新组件的状态，React负责其余的工作。这样可以确保在使用React时获得卓越的开发人员体验。
React render()函数
render()是更新和渲染UI的位置。render()是React中必需的生命周期方法。render()函数是创建React元素树的入口点。当组件中的状态或道具更新时，render()将返回不同的React元素树。如果在组件内使用setState() ，React会立即检测到状态更改并重新渲染组件。
然后，React找出如何有效地更新UI以匹配最新的树更改。
这是当React首先更新其虚拟DOM并仅更新实际DOM中已更改的对象时。
批量更新
React遵循批处理更新机制来更新实际DOM。因此，导致性能提高。这意味着对真实DOM的更新将分批发送，而不是针对状态的每个单个更改发送更新。
UI的重新绘制是最昂贵的部分，React有效地确保了真正的DOM仅接收批量更新来重新绘制UI
总结
- 频繁的DOM操作昂贵且性能沉重。
- 虚拟DOM是真实DOM的虚拟表示。
- 状态发生变化时，将更新虚拟DOM，并比较虚拟DOM的先前版本和当前版本。这称为
diff。 - 然后，虚拟DOM将批量更新发送到真实DOM以更新UI。
- React使用虚拟DOM来增强其性能。
- 它使用可观察对象来检测状态和道具更改。
- React使用高效的差异算法来比较虚拟DOM的版本。
- 然后，确保将批处理的更新发送到真实的DOM，以重新绘制或重新呈现UI。
网友评论