在阅读了有关ReactJS和Angular(而非AngularJS)更改检测和渲染阶段的文档和几篇文章之后,我提出了一个问题,稍后我将尝试解释。
您可能已经在React的文档(here和here中阅读过),这个概念(如果您愿意的话)存在“ 对帐”,它基本上是指调用“ Diffing算法”以及在“ render ”方法之后执行的过程,并创建React元素树,并创建 DOM 应该进行相应的更新...正如其文档中所述,React实现了一种启发式O(n)算法,该算法将虚拟DOM(VDOM)的新版本与先前版本进行比较,以便仅高效地更新虚拟DOM的那些部分。真正改变的看法。
但是谈到Angular,正如我在here,here和here之类的文章中所读到的,另一方面,Angular似乎只看了“ < em> bindings ”,它来自模板:
当编译器分析模板时,它会识别 与DOM元素关联的组件。对于每个这样的 关联,则编译器以以下形式创建绑定 说明。绑定是变更检测中的核心部分 角度的。
然后:
创建绑定后,Angular将不再与模板一起使用。 变更检测机制执行处理的指令 绑定。这些说明的工作是检查 具有组件属性的表达式已更改并执行DOM 必要时进行更新。
所以要总结一下:
处理执行脏检查并更新相关内容的绑定 DOM的一部分是变更检测中的核心操作 角度的。
(从第三个链接开始)
所以我的问题是,当我们仅在“ 绑定”而不是整个新生成的模板/ VDOM上运行更改检测时,我们可以说Angular实现了与React类似的性能提升。是否需要优化的差分算法?
或者Angular的变更检测中还有其他实现这种效率的地方吗?
答案 0 :(得分:1)
我们可以说Angular实现了类似的性能提升... 无需优化的差异算法
是
React中实际上没有进行太多优化。它只是比较返回的子元素的类型并丢弃该树。与键的比较涉及更多。我想说Angular运行更改检测的速度更快,因为所有子级在编译时都是已知的,但是React更加灵活,因为您可以每次返回一个全新的子级。在Angular中,您需要了解很多概念来动态更改或删除子级。在React中,只需要从render
方法返回另一个孩子即可。