我在(Pete Hunt: React: Rethinking best practices -- JSConf EU 2013)上看了一次React开发人员的演讲,演讲者提到模型的脏检查可能会很慢。但是,计算虚拟DOM之间的差异实际上不是更差吗,因为在大多数情况下,虚拟DOM应该比模型更大?
我真的很喜欢Virtual DOM的潜在功能(特别是服务器端渲染),但我想知道所有的优缺点。
发布于 2014-06-02 21:37:36
我是一个virtual-dom模块的主要作者,所以我也许能够回答您的问题。事实上,这里有两个问题需要解决
回答:当我观察到数据是脏的时。
在React中,每个组件都有一个状态。这种状态类似于您可能在knockout或其他MVVM样式库中找到的可观察对象。本质上,当重新渲染场景时,React知道,因为它能够观察到这些数据何时发生变化。脏检查比可观察数据慢,因为您必须定期轮询数据,并递归检查数据结构中的所有值。相比之下,在状态上设置一个值将通知侦听器某个状态已经更改,因此React可以简单地侦听状态上的更改事件并排队重新呈现。
虚拟DOM用于高效地重新呈现DOM。这与脏检查您的数据并不真正相关。您可以使用虚拟DOM重新渲染,无论是否进行脏检查。您说得对,在计算两个虚拟树之间的差异时存在一些开销,但虚拟DOM差异是为了了解DOM中需要更新的内容,以及您的数据是否发生了更改。实际上,diff算法本身就是一个脏检查器,但它是用来查看DOM是否脏的。
我们的目标是只有在状态改变时才重新渲染虚拟树。因此,使用可观察对象检查状态是否已更改是防止不必要的重新渲染的有效方法,这将导致许多不必要的树差异。如果什么都没有改变,我们什么也不做。
虚拟DOM很好,因为它可以让我们编写代码,就像我们重新渲染整个场景一样。在幕后,我们想要计算一个更新DOM的补丁操作,使其看起来符合我们的期望。因此,尽管虚拟DOM diff/patch算法可能不是最佳的解决方案,但它为我们提供了一种很好的表达应用程序的方式。我们只需准确地声明我们想要的东西,React/virtual-dom就会解决如何让你的场景看起来像这样。我们不需要手动操作DOM,也不需要对以前的DOM状态感到困惑。我们也不需要重新渲染整个场景,这可能比修补效率低得多。
发布于 2014-01-14 23:34:06
我最近在这里读了一篇关于React的diff算法的详细文章:http://calendar.perfplanet.com/2013/diff/。据我所知,让React变得快速的原因是:
仅对子树进行
与脏检查相比,IMO的主要区别是:
setState
时,React组件都被显式设置为脏组件,因此这里不需要(数据)比较。对于脏检查,每次摘要loop.第二点对于非平凡的模型更重要,例如具有大量字段或大型列表的模型。复杂模型的一个字段更改将只导致涉及该字段的DOM元素所需的操作,而不是整个视图/模板。
发布于 2016-05-04 03:34:16
我真的很喜欢虚拟DOM的潜在功能(特别是服务器端渲染),但我想知道所有的优缺点。
--操作
React不是唯一的DOM操作库。我鼓励您通过阅读这篇包含详细解释和基准的article from Auth0来了解替代方案。正如您所问的,我将在这里强调它们的优缺点:
React.js的虚拟DOM
优点
快速高效的algorithm
缺点
Ember.js的微光
优点
与Ember兼容的静态和动态algorithm
的内存中表示进行重大更新即可获得好处
缺点
增量DOM
优点
缺点
https://stackoverflow.com/questions/21109361
复制相似问题