您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

什么是变更检测?聊聊angular的变更机制

2024/4/19 10:16:52发布4次查看
什么是变更检测?下面本篇文章带大家聊聊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 检测器下次变化检测时一定检查此路径上的组件,即使设置了变化检测策略为 onpushdetectchanges():手动发起该组件到各个子组件的变更检测detach():将组件的检测器从检测器数中脱离,不再受检测机制的控制,除非重新 attach 上reattach():把脱离的检测器重新链接到检测器树上更多编程相关知识,请访问:编程视频!!
以上就是什么是变更检测?聊聊angular的变更机制的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录