Angular:它与ReactJS的“对帐”等效吗?

时间:2018-10-31 16:00:31

标签: angular reactjs angular2-changedetection virtual-dom

在阅读了有关ReactJS和Angular(而非AngularJS)更改检测和渲染阶段的文档和几篇文章之后,我提出了一个问题,稍后我将尝试解释。

您可能已经在React的文档(herehere中阅读过),这个概念(如果您愿意的话)存在“ 对帐”,它基本上是指调用“ Diffing算法”以及在“ render ”方法之后执行的过程,并创建React元素树,并创建 DOM 应该进行相应的更新...正如其文档中所述,React实现了一种启发式O(n)算法,该算法将虚拟DOM(VDOM)的新版本与先前版本进行比较,以便仅高效地更新虚拟DOM的那些部分。真正改变的看法。

但是谈到Angular,正如我在hereherehere之类的文章中所读到的,另一方面,Angular似乎只看了“ < em> bindings ”,它来自模板:

  

当编译器分析模板时,它会识别   与DOM元素关联的组件。对于每个这样的   关联,则编译器以以下形式创建绑定   说明。绑定是变更检测中的核心部分   角度的。

然后:

  

创建绑定后,Angular将不再与模板一起使用。   变更检测机制执行处理的指令   绑定。这些说明的工作是检查   具有组件属性的表达式已更改并执行DOM   必要时进行更新。

所以要总结一下:

  

处理执行脏检查并更新相关内容的绑定   DOM的一部分是变更检测中的核心操作   角度的。

(从第三个链接开始)

所以我的问题是,当我们仅在“ 绑定”而不是整个新生成的模板/ VDOM上运行更改检测时,我们可以说Angular实现了与React类似的性能提升。是否需要优化的差分算法?

或者Angular的变更检测中还有其他实现这种效率的地方吗?

1 个答案:

答案 0 :(得分:1)

  

我们可以说Angular实现了类似的性能提升...   无需优化的差异算法

React中实际上没有进行太多优化。它只是比较返回的子元素的类型并丢弃该树。与键的比较涉及更多。我想说Angular运行更改检测的速度更快,因为所有子级在编译时都是已知的,但是React更加灵活,因为您可以每次返回一个全新的子级。在Angular中,您需要了解很多概念来动态更改或删除子级。在React中,只需要从render方法返回另一个孩子即可。