什么是虚拟DOM?

虚拟DOM (VDOM)是一种编程概念，其中用户界面(UI)的理想或“虚拟”版本存储在内存中，并通过ReactDOM等库与“实际”DOM同步。这就是所谓的和解。

这个方法提供了React的声明性API:你告诉React你想让UI处于什么状态，它会确保DOM匹配。这将抽象出属性操作、事件处理和手动DOM更新，否则你将不得不使用它们来开发应用程序。

虚拟DOM实际上是如何工作的?

React比较虚拟DOM到虚拟DOM每次更新之前的原始状态快照。因此，在react js执行的比较的帮助下，它自动确定react组件的哪个部分需要更新。反应有趣的是，它采用了我们所说的差分算法来实现这一点，应用这种差分技术的过程被称为差分。因此，在比较之后，响应使用更新的节点更改需要更新的组件。让我们看一些示例代码，看看它是如何工作的:

初始DOM状态:

<div>
<div>
<h1> < / Hello Worldh1>
div>
<div>
<h1< / >你好宇宙h1>
div>
div>

更新DOM状态:

<div>
<div>
<h1> < / Hello Worldh1>
div>
<div>
<h1< / >你好行星h1>
div>
div>

更新DOM时，它只更新DOM的内容，如第二段代码所示。这种更新发生得如此之快，以至于我们经常看不到它。它只是标记需要更新的组件，并为我们进行更改。

虚拟DOM的功能方面

很明显，Virtual DOM提供的性能是惊人的。不仅如此，以下是Virtual DOM的一些优点:

1. 速度和性能提升
2. 轻量级
3. 它简单明了
4. 惊人的差分算法
5. 它不仅可以用于react，还可以用于其他框架

好吧，任何有优点的东西也会有缺点，让我们考虑一下虚拟DOM的缺点:

1. 更高的内存使用问题，因为差分算法需要不断比较元素，以知道哪些组件需要更新或更改。
2. 它不容易集成到许多其他框架中。
3. 您不能使用它或目标模板引擎。

即使有上面提到的缺点，虚拟DOM也始终是首选，因为它提供了性能和速度上的提升。

我们能得出什么结论?

Virtual DOM不会消失，因为许多库、框架和工具已经采用了它来改进其工具交付的服务的性能。它提供了一种非常出色的方法，可以将应用程序的所有逻辑与更改DOM的需求分离。您所要做的就是编写业务逻辑，它将为您处理DOM更新。

文章来源:React中的虚拟DOM是如何工作的，为什么重要?