(非常重要)Angular 2 执行顺序及检测机制

关于 ExpressionChangedAfterItHasBeenCheckedError 错误你所需要知道的事情

配合 OnChanges钩子,angular的变更检测机制和DoCheck 使用,效果更棒!

Angular变更检测顺序(读后感)

设:有ABC三个组件,CB的子组件,BA的子组件,A是根组件

  • 使用构造函数,实例化A组件
  • 实例化B组件,将A组件中对应的属性值绑定到B组件,此属性值是B组件的输入属性,本质上是B实例化后初始化可能会需要的参数
  • B组件已经实例化,需要的参数也已经传进来(输入属性),接下来做初始化操作ngInit(),该方法只会在B组件实例化后执行一次;还会做onChanges()操作,该方法只会在输入属性值发生改变时(本质上是内存地址发生改变)才执行;还会做DoCheck()操作,这个操作在每次“angular变更检测时”都会执行。每个异步操作都会引发一遍从头到尾、整个的变更检测。(备注;这些方法都是在B组件中定义的)
  • 到目前为止,A组件中该实例化的(包括A组件中的B组件)都已经准备妥当了,接下来该将A组件中对应的属性值绑定到模板中定义的表达式了(比如{{name}})
  • 接下来执行递归操作,将B组件中的C组件实例化,将B组件中对应的属性值绑定到C组件中的输入属性,然后执行C组件中定义的ngInit()、onChanges()、DoCheck()等操作,然后将B组件中对应的属性值绑定到模板中定义的表达式
  • 如果C组件中还有D组件,同理
  • 为所有子组件调用当前组件的 ngAfterViewInit()
  • 这样,一套完整的变更检测就算执行完成了。记住,在这一个变更检测周期内,某个属性值用过以后,不能再改变它的值,angular会认为这是不稳定的,会报错ExpressionChangedAfterItHasBeenCheckedError
  • 接下来,由异步操作(包括用户在页面上随意的的点击行为等)引起的再次变更检测,因为组件之前都已经实例化过了,所以省掉了实例化过程和ngInit()方法(ngAfterViewInit是不是也省略了?没验证)
  • Default策略:如果所有组件都使用Default策略,那么变更不管发生在哪个组件上,zone.js都会检测整个组件树
  • OnPush策略:如果有一个组件声明自己的策略为OnPush策略,那么只有组件的输入属性发生变化时,zone.js才会检测这个组件及其子组件,也才会调用对应的DoCheck()

关联知识点:从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 以前的安妮宝贝,现在的庆山,是一种出世的作者,现代作者太多,就拿蒋方舟和余点举例,算是入世的那一类。不同的选择造就...
    流水桃花阅读 322评论 0 2
  • 女人有更年期,众所周知。 男人也有更年期,你信吗? 一般说来,女人更年期过完之后,就会一改往日的...
    诺佳阅读 407评论 0 0
  • 小确幸这个词,我记得是日本作家村上春树提出来的。他是一位特别有名的日本小说家,生活过得特别有规律,当然他也很热爱生...
    灰姑娘玻璃鞋阅读 684评论 0 2
  • 工作久了觉得图书馆离自己很远,平时看书都是网上下载kindle或是亚马逊下单送货上门,已经很久很久没有去过图书馆了...
    庄小花的姐姐叫庄大花阅读 4,726评论 24 70

友情链接更多精彩内容