问为什么React的虚拟DOM的概念被认为比脏的模型检查性能更好？

EN

我是一个virtual-dom模块的主要作者，所以我也许能够回答您的问题。事实上，这里有两个问题需要解决

回答:当我观察到数据是脏的时。

• How我可以高效地重新渲染吗？答案:使用虚拟DOM生成真实的DOM补丁

在React中，每个组件都有一个状态。这种状态类似于您可能在knockout或其他MVVM样式库中找到的可观察对象。本质上，当重新渲染场景时，React知道，因为它能够观察到这些数据何时发生变化。脏检查比可观察数据慢，因为您必须定期轮询数据，并递归检查数据结构中的所有值。相比之下，在状态上设置一个值将通知侦听器某个状态已经更改，因此React可以简单地侦听状态上的更改事件并排队重新呈现。

虚拟DOM用于高效地重新呈现DOM。这与脏检查您的数据并不真正相关。您可以使用虚拟DOM重新渲染，无论是否进行脏检查。您说得对，在计算两个虚拟树之间的差异时存在一些开销，但虚拟DOM差异是为了了解DOM中需要更新的内容，以及您的数据是否发生了更改。实际上，diff算法本身就是一个脏检查器，但它是用来查看DOM是否脏的。

我们的目标是只有在状态改变时才重新渲染虚拟树。因此，使用可观察对象检查状态是否已更改是防止不必要的重新渲染的有效方法，这将导致许多不必要的树差异。如果什么都没有改变，我们什么也不做。

虚拟DOM很好，因为它可以让我们编写代码，就像我们重新渲染整个场景一样。在幕后，我们想要计算一个更新DOM的补丁操作，使其看起来符合我们的期望。因此，尽管虚拟DOM diff/patch算法可能不是最佳的解决方案，但它为我们提供了一种很好的表达应用程序的方式。我们只需准确地声明我们想要的东西，React/virtual-dom就会解决如何让你的场景看起来像这样。我们不需要手动操作DOM，也不需要对以前的DOM状态感到困惑。我们也不需要重新渲染整个场景，这可能比修补效率低得多。

我最近在这里读了一篇关于React的diff算法的详细文章：http://calendar.perfplanet.com/2013/diff/。据我所知，让React变得快速的原因是：

仅对子树进行

• 批处理DOM读/写operations.
• Efficient更新。

与脏检查相比，IMO的主要区别是：

1. Model脏检查：每当调用setState时，React组件都被显式设置为脏组件，因此这里不需要(数据)比较。对于脏检查，每次摘要loop.
2. DOM更新：DOM操作都会发生(模型的)比较，这是非常昂贵的，因为修改DOM也会应用和计算CSS，布局。不必要的DOM修改所节省的时间可能比区分虚拟DOM所花费的时间更长。

第二点对于非平凡的模型更重要，例如具有大量字段或大型列表的模型。复杂模型的一个字段更改将只导致涉及该字段的DOM元素所需的操作，而不是整个视图/模板。

我真的很喜欢虚拟DOM的潜在功能(特别是服务器端渲染)，但我想知道所有的优缺点。

--操作

React不是唯一的DOM操作库。我鼓励您通过阅读这篇包含详细解释和基准的article from Auth0来了解替代方案。正如您所问的，我将在这里强调它们的优缺点：

React.js的虚拟DOM

优点

快速高效的algorithm

• Multiple前端(JSX、hyperscript)

• Lightweight，足以在移动设备上运行)
• 快速高效的“扩散”前端
• 大量的traction和JSX无需React即可使用(即作为独立引擎)

缺点

• DOM的完整内存中拷贝(更高的内存使用率)
• 静态和动态元素之间没有区别

Ember.js的微光

优点

与Ember兼容的静态和动态algorithm

• Differentiation之间快速高效的区分

• (无需对现有的DOM

的内存中表示进行重大更新即可获得好处

缺点

• 只能在Ember
• 中使用，只有一个前端可用

增量DOM

优点

• Reduced memory usage
• Simple API
• 轻松与许多前端和框架集成(从一开始就是模板引擎后端)

缺点

• 不如其他库快(这是有争议的，请参阅下面的基准测试)
• 较少使用