React的虚拟DOM究竟如何更快？

Question

我知道React的虚拟DOM更快有两个理由-

>

它只更新那些实际需要更新的元素（使用diff）。

它批量更新，因此我们只更新一次真正的DOM。因此，重新喷漆也只能进行一次，否则会进行多次。

我对这两点都有疑问-

>

据我所知，所有现代浏览器的效率都足以只更新DOM中所需的元素。例如，如果我有两个“p”标记，并且我使用按钮单击更改其中一个p标记中的文本，那么safari将只更新该p标记（我已使用油漆闪烁验证了这一点）。那么，如果浏览器已经实现了第1点，那么它有什么优势呢？

批量更新的具体反应是什么？最终React还必须使用domapi来更新真正的DOM。那么，为什么如果我们直接使用domapi，那么更改将不会被批处理，而当React使用它时，更改将被批处理呢？

Answer 1

一旦React知道哪些虚拟DOM对象已经更改，那么React只更新真实DOM中的那些对象。与直接操作真实DOM相比，这使性能大大提高。这使React成为一个高性能JavaScript库。

关于批量更新：

React遵循批处理更新机制来更新真正的DOM。因此，导致性能提高。这意味着对真正DOM的更新是批量发送的，而不是为状态的每一个变化发送更新。

用户界面的重新绘制是最昂贵的部分，React有效地确保真正的DOM只接收批处理更新来重新绘制用户界面。

Answer 2

我已经找到了问题的答案。

关键是要理解虚拟DOM的目的。

首先，我们必须了解React采用什么方法渲染组件。

不同的javascript框架采用不同的方法来检测数据模型中的更改并在视图中呈现它们。

考虑AngularJS。当我们在Angular模板中引用我们的数据时，例如在像{{foo. x}}这样的表达式中，Angular不仅呈现该数据，还为该特定值创建了一个观察者。每当我们的应用程序发生任何事情（单击事件，HTTP响应，超时），所有的观察者都将运行。如果观察者中的值已更改，则该值将在UI中重新呈现。通过运行所有的观察者AngularJS本质上是找出它需要在哪里进行更改。运行这些观察者的过程称为脏检查。

React采取了不同的方法。每当React组件中发生状态更改时，React都会从头开始重新呈现整个UI（使用更新的状态），而不是找出在何处进行更改（如AngularJS）。

但这种反应方式有一个问题。重新呈现整个UI意味着重新呈现整个DOM树。这是一个问题，因为DOM更新是一个缓慢的过程（由于回流和重新绘制）。

这就是React的虚拟DOM的用武之地。虚拟DOM只是以javascript对象的形式表示的真实DOM。它只是存在于内存中的普通javascript对象的树数据结构。与真实DOM相比，虚拟DOM的渲染要快得多，因为它从来没有在屏幕上渲染过（不需要进行回流或重新绘制）。

那么虚拟DOM是如何解决这个问题的呢？当我们加载应用程序时，React会创建一个虚拟DOM，它是真实DOM的精确虚拟副本。每当组件中发生状态更改时，React都会渲染整个新的虚拟DOM（具有更新的状态），而不是重新渲染整个真实DOM。然后，它在旧的虚拟DOM（真实DOM的初始副本）和这个新的虚拟DOM（状态更改后呈现）之间进行区分，以找出它们之间的更改，并且只在真实DOM中进行这些更改。通过这种方式，重新呈现整个UI（通过呈现一个全新的虚拟DOM），但在真实DOM中只进行所需的最小更改。

因此，当有人说“使用Virtual DOM React只更新那些需要更新的元素”（我的问题中的第1点）时，这意味着借助Virtual DOM React正在克服其自身方法（从头呈现整个UI的方法）的局限性。

这个回答也解释了同样的概念。

我已经看到一些答案表明，使用React进行DOM操作比使用domapi快，因为domapi重新呈现整个DOM树，而React只重新呈现DOM树中需要更改的部分。事实并非如此。所有现代浏览器的效率都足以只更新DOM树中需要更改的部分。这可以通过浏览器的开发者工具中的油漆闪烁来验证（也可以参见这个答案和这个答案）。即使我们假设domapi确实重新呈现了整个DOM树，但这种推理仍然是错误的，因为React本身的内部代码必须使用domapi来更新DOM。如果domapi确实重新呈现了整个DOM树，那么React也会重新呈现整个DOM树，因为它最终也会使用domapi来更新DOM。

在React中，虽然读取是在真实的DOM上完成的，但写入（状态更改）不是在真实的DOM上完成的。相反，写入是排队的。然后，当我们所有的读和写操作都被处理后，一个新的虚拟DOM将基于写操作构建。然后在旧的和新的虚拟DOM之间进行区分，然后React将所需的更改写入真实DOM以更新它。因此，最终所有在真实DOM上的写操作都在一次回流中一起完成。

但我们也可以手动编写代码，而无需做出反应，这样首先完成所有读取，然后完成所有写入。React使批处理更容易，因为使用React，我们不必关心一起执行读写操作，React将自动为我们批处理写操作。所以，反应并不能使事情变得快。它使事情变得更容易。

Rich Harris的这篇文章还指出，“虚拟DOM很快”是一个神话。