深入理解 Angular 变化检测(change detection)
引言本文分享一些讲解Angular Change Detection的文章,并指出其中有意思的内容,以及自己的一些总结和引申。 Angular Change Detection Explained by thoughtram
多态(polymorphic):通用性往往意味着多态的存在。多态的含义是,一段代码,多次执行,但是每次执行所操作的对象都不是同一个对象,甚至这些对象的“形状”(shape)相差巨大(属性名不一样,或者属性被添加的顺序不一样)。这种代码难以被优化。大量使用单态(monomorphic)是Angular 速度爆炸的重要原因!除了Change Detection方面,Angular在其他地方也使用了单态的优化思想。
Change Detection in Angular作者Victor Savkin以前是Angular核心团队的成员,现在似乎自己创建了一个Angular的企业咨询公司。 变化检测是有向的“Change detectors propagate bindings from the root to leaves in the depth first order.” 数据传播到view的绑定: <span>todo: {{todo.text}}</span> 数据传播到子组件的绑定: <todo-cmp [model]="myTodo"></todo-cmp> 变化检测将用本组件的 变化检测默认检测所有组件的原因"Angular has to be conservative and run all the checks every single time because the JavaScript language does not give us object mutation guarantees." OnPush接下来就是介绍 值得注意的是,作者指出 Two Phases of Angular Applications文章开头概括得非常精辟: Angular 2 separates updating the application model(可以理解为更新Component的属性值) and reflecting the state of the model in the view into two distinct phases. The developer is responsible for updating the application model. Angular,by means of change detection,is responsible for reflecting the state of the model in the view. The framework does it automatically on every VM turn. Angular应用的变化(Component属性的变化和DOM的变化)分成2个阶段(按发生先后顺序排序):
第一个阶段结束以后才会进入第二个阶段。 可见,事件绑定和数据绑定的语法虽然看起来很相似( 这样划分阶段的意义在AngularJS时代,脏检查的执行过程中不仅会更新DOM,而且可能会更新其他application model,但application model被更新以后,可能有别的DOM又因此需要被更新(因为DOM展示的内容依赖于application model),因此AngularJS不得不做多次脏检查,直到application model不再更新。这会影响应用的性能,而且不利于Debug(因为你不知道application model是什么时候被谁更新的,是事件回调更新的?还是在某次脏检查执行过程中被更新的?)。 正因为这个原因,Angular才如此划分阶段。在Angular中,application model的更新只能有2个原因:
开发者不需要像AngularJS时代那样考虑脏检查的杂乱更新过程,现在只要稍微分析一下就能知道数据是如何流动的。这让应用的逻辑更加清晰,更容易调试和重构。 view的更新也更加简单高效了,因为只需要执行一轮变化检测(一轮变化检测执行完以后数据就会稳定下来,不再变化)。并且数据的流动方向也非常清晰,始终是从父组件流入子组件(单向数据流)。 另外,Angular开发者也不需要像AngularJS开发者那样害怕数据环路了(看本小节第一段的例子),因为这不再会发生。在Angular中,在第一阶段,我们可以更新任何父组件、子组件的数据,在第二阶段也不会造成数据环路(因为在第二阶段,数据的传播是单向的)。 更多相关文章弄懂了这几篇文章以后,很多相关文章的内容其实大同小异。我整理了一张change detection文章列表,里面的文章都是讲得比较好的,不过只有一篇是中文。。。如果感觉还不是太懂的话可以在里面多找几篇阅读。其中angularindepth的文章一般会深入到源码,想要更深入理解的话可以阅读其中文章,乃至自己研究Angular源码。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |