Angular开发实践(五):深入解析变化监测
什么是变化监测
在使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。而这些绑定的值之所以能在视图与模型之间保持同步,正是得益于Angular中的变化监测。
简单来说,变化监测就是 Angular 用来监测视图与模型之间绑定的值是否发生了改变,当监测到模型中绑定的值发生改变时,则同步到视图上,反之,当监测到视图上绑定的值发生改变时,则回调对应的绑定函数。
变化监测的源头
变化监测的关键在于如何最小粒度地监测到绑定的值是否发生了改变,那么在什么情况下会导致这些绑定的值发生变化呢?我们可以看一下我们常用的几种场景:
Events: click/hover/…
@Component({
selector: 'demo-component',
template: `
<h1>{{name}}</h1>
<button (click)="changeName()">change name</button>
`
})
export class DemoComponent {
name: string = 'Tom';
changeName() {
this.name = 'Jerry';
}
}
我们在模板中通过插值表达式绑定了 name 属性。当点击change name按钮
时,改变了 name 属性的值,这时模板视图显示内容也发生了改变。
XHR/webSocket
@Component({
selector: 'demo-component',
template: `
<h1>{{name}}</h1>
`
})
export class DemoComponent implements OnInit {
name: string = 'Tom';
constructor(public http: HttpClient) {}
ngOnInit() {
// 假设有这个./getNewName请求,返回一个新值'Jerry'
this.http.get('./getNewName').subscribe((data: string) => {
this.name = data;
});
}
}
我们在这个组件的 ngOnInit 函数里向服务器端发送了一个 Ajax 请求,当这个请求返回结果时,同样会改变当前模板视图上绑定的 name 属性的值。
Times: setTimeout/requestAnimationFrame
@Component({
selector: 'demo-component',
template: `
<h1>{{name}}</h1>
`
})
export class DemoComponent implements OnInit {
name: string = 'Tom';
constructor() {}
ngOnInit() {
// 假设有这个./getNewName请求,返回一个新值'Jerry'
setTimeout(() => {
this.name = 'Jerry';
}, 1000);
}
}
我们在这个组件的ngOnInit函数里通过设定一个定时任务,当定时任务执行时,同样会改变当前视图上绑定的name属性的值。
总结
- 其实,我们不难发现上述三种情况都有一个共同点,即这些导致绑定值发生改变的事件都是异步发生的。
- Angular并不是捕捉对象的变动,它采用的是在适当的时机去检验对象的值是否被改动,这个时机就是这些异步事件的发生。
- 这个时机是由 NgZone 这个服务去掌控的,它获取到了整个应用的执行上下文,能够对相关的异步事件发生、完成或者异常等进行捕获,然后驱动 Angular 的变化监测机制执行。
变化监测的处理机制
通过上面的介绍,我们大致明白了变化检测是如何被触发的,那么 Angular 中的变化监测是如何执行的呢?
首先我们需要知道的是,对于每一个组件,都有一个对应的变化监测器;即每一个 Component 都对应有一个changeDetector
,我们可以在 Component 中通过依赖注入来获取到changeDetector
。
而我们的多个 Component 是一个树状结构的组织,由于一个 Component 对应一个changeDetector
,那么changeDetector
之间同样是一个树状结构的组织。
最后我们需要记住的一点是,每次变化监测都是从 Component 树根开始的。
举个例子
子组件:
@Component({
selector: 'demo-child',
template: `
<h1>{{title}}</h1>
<p>{{paramOne}}</p>
<p>{{paramTwo}}</p>
`
})
export class DemoChildComponent {
title: string = '子组件标题';
@Input() paramOne: any; // 输入属性1
@Input() paramTwo: any; // 输入属性2
}
父组件:
@Component({
selector: 'demo-parent',
template: `
<h1>{{title}}</h1>
<demo-child [paramOne]='paramOneVal' [paramTwo]='paramTwoVal'></demo-child>
<button (click)="changeVal()">change name</button>
`
})
export class DemoParentComponent {
title: string = '父组件标题';
paramOneVal: any = '传递给paramOne的数据';
paramTwoVal: any = '传递给paramTwo的数据';
changeVal() {
this.paramOneVal = '改变之后的传递给paramOne的数据';
}
}
上面的代码中,DemoParentComponent 通过标签嵌入了 DemoChildComponent,从树状结构上来说,DemoParentComponent 是 DemoChildComponent 的根节点,而 DemoChildComponent 是 DemoParentComponent 的叶子节点。
当我们点击 DemoParentComponent 的 button 时,会回调到 changeVal 方法,然后会触发变化监测的执行,变化监测流程如下:
首先变化检测从 DemoParentComponent 开始:
- 检测 title 值是否发生了变化:没有发生变化
- 检测 paramOneVal 值是否发生了变化:发生了变化(点击按钮调用changeVal()方法改变的)
- 检测 paramTwoVal 值是否发生了变化:没有发生变化
然后变化检测进入到叶子节点 DemoChildComponent:
- 检测 title 值是否发生了改变:没有发生变化
- 检测 paramOne 是否发生了变化:发生了改变(由于父组件的属性paramOneVal发生了改变)
- 检测 paramTwo 是否发生了改变:没有发生变化
最后,因为 DemoChildComponent 再也没有了叶子节点,所以变化监测将更新DOM,同步视图与模型之间的变化。
变化监测策略
学习了变化监测的处理机制之后,你可能会想,这机制未免也有点太简单粗暴了吧,假如我的应用中有成百上千个 Component,随便一个 Component 触发了监测,那么都需要从根节点到叶子节点重新检测一遍。
别着急,Angular 的开发团队已经考虑到了这个问题,上述的检测机制只是一种默认的检测机制,Angular 还提供一种 OnPush 的检测机制(设置元数据属性 changeDetection: ChangeDetectionStrategy.OnPush)。
OnPush 与 Default 之间的差别:当检测到与子组件输入绑定的值没有发生改变时,变化检测就不会深入到子组件中去。
变化监测类 - ChangeDetectorRef
上面说到我们可以修改组件元数据属性 changeDetection 来修改组件的变化监测策略(ChangeDetectionStrategy.Default 或 ChangeDetectionStrategy.OnPush),除了这个,我们还可以使用 ChangeDetectorRef 来更加灵活的控制组件的变化监测。
Angular 在整个运行期间都会为每一个组件创建 ChangeDetectorRef 的实例,该实例提供了相关方法来手动管理变化监测。有了这个类,我们自己就可以自定义组件的变化监测策略了,如停止/启用变化监测或者按指定路径变化监测等等。
相关方法如下:
- markForCheck():把根组件到该组件之间的这条路径标记起来,通知Angular在下次触发变化监测时必须检查这条路径上的组件。
- detach():从变化监测树中分离变化监测器,该组件的变化监测器将不再执行变化监测,除非再次手动执行reattach()方法。
- reattach():把分离的变化监测器重新安装上,使得该组件及其子组件都能执行变化监测。
- detectChanges():手动触发执行该组件到各个子组件的一次变化监测。
使用方法也很简单,直接在组件中注入即可:
@Component({
selector: 'demo-parent',
template: `
<h1>{{title}}</h1>
`
})
export class DemoParentComponent implements OnInit {
title: string = '组件标题';
constructor(public cdRef: ChangeDetectorRef) {}
ngOnInit() {
this.cdRef.detach(); // 停止组件的变化监测,看需求使用不同的方法
}
}
- 彻底隐藏你HTML网页的源代码
- java学习:JMM(java memory model)、volatile、synchronized、AtomicXXX理解
- 使用CSS制作文字环绕图片效果(文字内容包含<li>标签)
- ClojureScript魔法堂:搭建开发环境
- PHP error_reporting() 错误控制函数功能详解
- centos上安装elasticsearch 5.5.1 遇到的各种坑
- 概率论08 随机变量的函数
- @Transactional导致AbstractRoutingDataSource动态数据源无法切换的解决办法
- 防F12扒代码:按下F12关闭当前页面
- TCP/IP(七)之玩转HTTP协议
- Android的历史与花边
- 意译:《JVM Internals》
- 来玩Play框架07 静态文件
- IDEA的svn
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 没啥用,更换注册表信息使webbrower选择适合的版本
- linux下分割和合并压缩包
- 编译.net .net Core程序 代码,仅做备份
- js删除数组对象中符合条件的数据
- .net core webapi jwt 更为清爽的认证 ,续期很简单(2)
- 手把手教你写一个windows服务 【基于.net】 附实用小工具{注册服务/开启服务/停止服务/删除服务}
- 一网打尽枚举操作 .net core
- Jenkins 发布.net core 程序,服务端无法下载nuget包的解决方法 error NU1102: 找不到版本为 (>= 3.1.6) 的包
- NET Core Kestrel部署HTTPS 一个服务器绑一个证书 一个服务器绑多个证书
- .net core webapi jwt 更为清爽的认证 ,续期很简单(1)
- 用flask来在线管理你的iptables
- Linux Shell命令速查表
- Windows10实现滑动锁屏
- Vue&uni-app在微信浏览器隐藏titleNView的一个方法
- 使用OData服务将SAP C4C自定义BO的TextCollection暴露给外部消费者