angular的变更机制是怎样的,变更检测是什么?
导读:在实际案例的操作过程中,我们可能会遇到“angular的变更机制是怎样的,变更检测是什么?”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起...
在实际案例的操作过程中,我们可能会遇到“angular的变更机制是怎样的,变更检测是什么?”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。什么是变更检测?下面本篇文章带大家聊聊Angular中的变更检测机制,介绍一下状态变化如何通知变更检测、Angular变更检测策略,希望对大家有所帮助。
一、什么是变更检测
- 概括: 一种更改
检测机制
,用于遍历组件树,检查每个组件的变化,并在组件属性发生变化的时候触发DOM
的更新。【相关教程推荐:《angular教程》】 - 变更检测的基本任务: 获得程序的内部
状态
并使之在用户界面可见
。这个状态可以是任何的对象、数组、基本数据类型。
二、什么引起了变更
事件驱动,来源有以下三大类:
- 事件:页面 click、submit、mouse down……
- XHR:从后端服务器拿到数据
- Timers:setTimeout()、setInterval()
这几点有一个共同点,就是它们都是异步的,也就是说,所有的异步操作
是可能导致数据变化的根源因素,所以每当执行一些异步操作时,我们的应用程序状态可能发生改变,而这时则需要去更新视图
三、状态变化怎么通知变更检测
在Angular
当中则接入了NgZone
,由它来监听Angular所有的异步事件
,Angular 在启动时会重写(通过 Zone.js
)部分底层浏览器 API(暴力的拦截了所有的异步事件)。
常见的有两种方式来触发变化检测,一种方法是基于组件的生命周期钩子
ngAfterViewChecked() { console.log('cluster-master.component cd'); }
另一种方法是手动控制变化检测的打开或者关闭,并手动触发
constructor(private cd: ChangeDetectorRef) { cd.detach() setInterval(() => { this.cd.detectChanges() } , 5000) }
三、Angular 变更检测
Angular 的核心是组件化,组件的嵌套会使得最终形成一棵组件树
,Angular 的变化检测可以分组件进行,每个组件都有对应的变化检测器 ChangeDetector
,可想而知这些变化检测器也会构成一棵树。
在 Angular 中每个组件都有自己的变化检测器,这使得我们可以对每个组件分别控制如何以及何时进行变更检测。
四、变更检测策略
Angular还让开发者拥有定制变化检测策略的能力。
- default:
每次
变更检测都会引起组件的变更检测,包括其他组件
的状态变化,以及本组件
引用型变量内部属性值变化 - Onpush: 每次变更检测会跳过本组件的变更检查,除非
满足一些条件
4.1 default
Angular 默认的变化检测机制是 ChangeDetectionStrategy.Default
,每次异步事件 callback 结束后,NgZone会触发整个组件树
至上而下
做变化检测
4.2 onPush
OnPush 策略,用以跳过
某个 component 以及它下面所有子组件
的变化检测
其实在设置了 OnPush
策略以后,还是有许多方法可以触发变更检测的;
- 1)组件的
@Input
属性的引用
发生变化。 - 2)组件内的
DOM
事件,包括它子组件的 DOM 事件,比如click、submit、mouse down
。 - 3)组件内的
Observable
订阅事件,同时设置Async pipe
。 - 4)组件内手动使用
ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()
方法
五、变化检测对象引用
- markForCheck():使用于
子组件
,将该子组件到根组件
之间的路径标记起来,通知 angular 检测器下次变化检测时一定
检查此路径上的组件,即使设置了变化检测策略为onPush
- detectChanges():手动发起
该组件到各个子组件
的变更检测 - detach():将组件的检测器从检测器数中
脱离
,不再受检测机制的控制,除非重新 attach 上 - reattach():把脱离的检测器
重新链接
到检测器树上
以上就是关于“angular的变更机制是怎样的,变更检测是什么?”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: angular的变更机制是怎样的,变更检测是什么?
本文地址: https://pptw.com/jishu/654213.html