提问者:小点点

为什么说React的虚拟DOM概念比脏模型检查性能更好呢?


我在(Pete Hunt:React:Rethinking best practices--JSConf EU 2013)上看到了React开发人员的演讲,演讲人提到模型的dirtychecking可能会很慢。但是计算虚拟DOM之间的差异难道不是实际上性能更差吗?因为在大多数情况下,虚拟DOM应该比模型大?

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


共3个答案

匿名用户

我是virtual-dom模块的主要作者,因此我可能能够回答您的问题。这里实际上有两个问题需要解决

在React中,每个组件都有一个状态。这种状态就像是在knockout或其他MVVM样式库中可以观察到的状态。从本质上说,React知道何时重新渲染场景,因为它能够观察到数据何时发生变化。脏检查比可观察的慢,因为您必须定期轮询数据,并递归地检查数据结构中的所有值。通过比较,在状态上设置一个值将向侦听器发出某种状态已更改的信号,因此React可以简单地侦听状态上的更改事件并对重新呈现进行排队。

虚拟DOM用于有效地重新呈现DOM。这并不是真的与肮脏地检查你的数据有关。您可以使用虚拟DOM重新呈现,无论是否进行脏检查。您是对的,在计算两个虚拟树之间的差异时会有一些开销,但是虚拟DOM差异是关于了解需要在DOM中更新什么,而不是您的数据是否已经更改。实际上,diff算法本身就是一个脏检查器,但它用于查看DOM是否脏。

我们的目标是只在状态改变时重新渲染虚拟树。因此,使用一个可观察值来检查状态是否已经改变是一种有效的方法来防止不必要的重渲染,因为重渲染会导致大量不必要的树差异。如果一切都没有改变,我们就什么都不做。

虚拟DOM很好,因为它让我们编写代码时就像重新呈现整个场景一样。在幕后,我们希望计算更新DOM的补丁操作,以查看我们所期望的情况。因此,虽然虚拟DOM Diff/Patch算法可能不是最佳解决方案,但它为我们提供了一种非常好的方法来表达我们的应用程序。我们只需准确地声明我们想要的内容,react/virtual-dom就会制定出如何使您的场景看起来像这样。我们不必进行手动DOM操作,也不必对以前的DOM状态感到困惑。我们也不必重新渲染整个场景,这可能比修补它的效率低得多。

匿名用户

我最近在这里阅读了一篇关于React's diff算法的详细文章:http://calendar.perfplanet.com/2013/diff/。以我的理解,让React快速的是:

与DirtyCheck相比,IMO的主要区别在于:

> 时显式地设置为dirty,因此这里不需要比较(数据)。对于dirtychecking,(模型的)比较总是在每个摘要循环中进行。

DOM更新:DOM操作非常昂贵,因为修改DOM还将应用和计算CSS样式,布局。不必要的DOM修改所节省的时间可能比改变虚拟DOM所花费的时间更长。

第二点对于非琐碎的模型(例如具有大量字段或大列表的模型)更为重要。复杂模型的一个字段更改将只导致涉及该字段的DOM元素所需的操作,而不是整个view/template。

匿名用户

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

--业务

React不是唯一的DOM操作库。我鼓励您通过阅读Auth0中的这篇文章来了解替代方案,其中包括详细的解释和基准测试。正如你所问的,我将在这里强调它们的利弊:

  • 重量轻,可在移动设备上运行/li>

  • 仅用于ember/li>