我在(Pete Hunt:React:Rethinking Best Practices-JSConf EU 2013)上看到了一个React开发人员的演讲,演讲者提到对模型进行脏检查可能很慢。但是,由于虚拟DOM在大多数情况下应该比模型更大,难道计算虚拟DOM之间的差异实际上还没有表现得更好吗?
我真的很喜欢Virtual DOM(尤其是服务器端渲染)的潜在功能,但是我想知道所有的优点和缺点。
我在(Pete Hunt:React:Rethinking Best Practices-JSConf EU 2013)上看到了一个React开发人员的演讲,演讲者提到对模型进行脏检查可能很慢。但是,由于虚拟DOM在大多数情况下应该比模型更大,难道计算虚拟DOM之间的差异实际上还没有表现得更好吗?
我真的很喜欢Virtual DOM(尤其是服务器端渲染)的潜在功能,但是我想知道所有的优点和缺点。
这是React团队成员SebastianMarkbåge的评论,阐明了一些观点:
React对输出进行区分(这是已知的可序列化格式,DOM属性)。这意味着源数据可以是任何格式。它可以是不可变的数据结构,也可以是闭包内部的状态。
Angular模型不会保留参照透明性,因此本质上是可变的。您可以对现有模型进行变异以跟踪更改。如果您的数据源每次都是不可变数据或新的数据结构(例如JSON响应)怎么办?
脏检查和Object.observe在关闭范围状态下不起作用。
显然,这两件事非常限制了功能模式。
此外,当模型复杂度增加时,进行脏跟踪变得越来越昂贵。但是,如果您仅在视觉树上做差异,例如React,那么它就不会增长太多,因为您可以在任何给定点在屏幕上显示的数据量受到UI的限制。皮特(Pete)的上面的链接涵盖了更多的性能好处。
我最近在这里阅读了有关React差异算法的详细文章:http : //calendar.perfplanet.com/2013/diff/。据我了解,使React快速的原因是:
与脏检查相比,IMO的主要区别在于:
模型脏检查:每次setState
调用React组件时,显式设置为脏,因此这里不需要(数据)比较。对于脏检查,(模型的)比较总是在每个摘要循环中进行。
DOM更新:DOM操作非常昂贵,因为修改DOM还将应用并计算CSS样式,布局。不必要的DOM修改所节省的时间可能比扩散虚拟DOM所花费的时间更长。
对于非平凡的模型(例如具有大量字段或大量列表的模型),第二点更为重要。复杂模型的一个字段更改将仅导致涉及该字段的DOM元素所需的操作,而不是整个视图/模板。
您可以阅读这篇文章(Virtual DOM和DOM之间的区别)以了解Real DOM和Virtual DOM。希望对您有所帮助!