angular11源码探索[DoCheck 生命周期和onChanges区别]
网站
https://blog.thoughtram.io/
https://juristr.com/
https://www.concretepage.com/angular/
https://www.youtube.com/c/MundoAtrevido4U/videos
https://www.concretepage.com/angular/
https://blog.mgechev.com/
https://lifewood.hatenablog.com/
#Frontend
原理图
直接生成模块和路由然后定义声明的模块
ng g m one --routing --m=app
组件+模块+路由+指向的声明路径
ng g m two --route=home --m=app
生命周期 DoCheck 和 onChanges 的区别
当我们传入数组或者对象的时候,我们会发现子组件的onChanges
检测不到变化
这时候我们可以用DoCheck
来监控变化了
父组件,当点击的时候给父组件
export class TwoComponent implements OnInit {
public arr: Array<any> = ['a', 'b', 'c']
obj: object = {
name: 'xxx',
age: 'bbb'
};
constructor() {
}
ngOnInit(): void {
}
public i: number = 0;
clickMethod(): void {
this.arr.push(this.arr.length)
this.obj[this.i++] = this.i;
}
}
<button (click)="clickMethod()">++</button>
<app-user [sex]="arr" [videos]="obj"></app-user>
子组件
只要运行更改检测,就会调用 ngDoCheck()
export class UserComponent implements OnInit,OnChanges,DoCheck {
@Input('sex') sex;
@Input('videos') videos;
// 可以解构拿到需要修改的属性
ngOnChanges({sex,videos}: SimpleChanges) {
console.log(sex);
console.log(videos);
}
ngDoCheck() {
console.log(this.videos);
}
}
我们会发现ngOnChanges
子组件除了第一次传递的时候能监控到变化,当修改的时候监控不到
但是我们会发现ngDoCheck
在修改的时候能监控到对象的变化
ngOnChanges 用于 基本数据类型
ngDoCheck 用于引用数据类型
KeyValueDiffers
KeyValueDiffers
是不同地图差异策略的存储库。角内部使用它的指令NgClass
,NgStyle
等等。无论何时,只要结合这些指令值的变化,这些变化体现。为了处理和更新更改,Angular使用KeyValueDiffers
。
1. KeyValueDiffers
可以使用构造函数注入到组件中。
constructor(private kvDiffers: KeyValueDiffers) {}
2. KeyValueDiffers
提供find
方法。
find(kv: any): KeyValueDifferFactory;
kv:传递需要检测以进行更改的对象。
find
方法返回KeyValueDifferFactory
。
3. KeyValueDifferFactory
提供工厂KeyValueDiffer
。要获取KeyValueDiffer
实例,请KeyValueDifferFactory
提供create
方法。
create<K, V>(): KeyValueDiffer<K, V>;
4. KeyValueDiffer
与众不同之处是跟踪对象随时间的变化。它具有一种diff
计算先前状态和新对象状态之间的差异的方法。
diff(object: Map<K, V>): KeyValueChanges<K, V> | null;
5. KeyValueChanges
自上次diff
调用该方法以来,将更改保留在映射中。KeyValueChanges
有以下方法。
forEachItem:遍历所有更改。
forEachPreviousItem:迭代已更改的先前项目。
forEachChangedItem:迭代其值已更改的那些项。
forEachAddedItem:遍历所有添加的项目。
forEachRemovedItem:遍历所有已删除的项目。
上述所有KeyValueChanges
提供KeyValueChangeRecord
项目的方法都是迭代的。
6. KeyValueChangeRecord
是表示项目更改信息的记录。KeyValueChangeRecord
具有诸如currentValue
和previousValue
。要获取当前值,我们将其称为currentValue
属性,并获取先前值,我们将其称为previousValue
属性。找到代码段。
readonly key: K;
readonly currentValue: V | null;
readonly previousValue: V | null;
完整的例子
export class UserComponent implements OnInit, OnChanges, DoCheck {
@Input('sex') sex;
@Input('videos') videos;
public differs
// 可以解构拿到需要修改的属性,一般用于基本数据类型
ngOnChanges({sex, videos}: SimpleChanges) {
// console.log(sex);
// console.log(videos);
}
ngDoCheck() {
let mpArray = this.differs.diff(this.sex)
if (mpArray) {
// 变化检测
mpArray.forEachAddedItem(record => {
console.log('增加', record);
})
mpArray.forEachChangedItem(record => {
console.log('更改', record);
})
mpArray.forEachRemovedItem(record => {
console.log('删除', record);
})
/*有变动的时候,显示原始所有值*/
mpArray.forEachPreviousItem(record => {
// console.log('之前的',record);
})
/*遍历所有*/
mpArray.forEachItem(record => {
// console.log(record);
})
}
}
constructor(private kvDiffers: KeyValueDiffers) {
}
ngOnInit(): void {
if (this.sex) {
this.differs = this.kvDiffers.find(this.sex).create()
}
}
}
IterableDiffer
跟踪随时间变化为可迭代的策略。用于通过NgForOf
影响DOM中的等效更改来响应可迭代的更改
在查看IterableDiffer
源码的时候我们会发现很多部分跟KeyValueDiffers
有重叠性,
内部NgForOf
使用了生命周期挂钩ngOnChanges
和ngDoCheck
。ngOnChanges
该指令用于使用集合find
实例的方法根据当前集合的类型选择一个差异IterableDiffers
。ngDoCheck
用于将差值应用于集合的当前值。在不同的是要收集与以前的值进行比较,并返回更改列表。
有趣的是,差异如何比较集合中的各个值。特别是,它使用值的哪些属性来区分它们。为此,我们需要看一下TrackByFunction
界面
代码
export interface TrackByFunction<T> {
(index: number, item: T): any;
}
demo
<div *ngFor="let item of sex;trackBy:indexFn" >{{item}}</div>
sex=['a','b','c']
indexFn(index,item){
console.log(index,item);
return index
}
0 "a"
1 "b"
2 "c"
不同点
iterableDiffer
比较项目序列
KeyValueDiffer
比较字典
angular11源码探索[DoCheck 生命周期和onChanges区别]的更多相关文章
- Vue2.0源码阅读笔记--生命周期
一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...
- Laravel源码分析--Laravel生命周期详解
一.XDEBUG调试 这里我们需要用到php的 xdebug 拓展,所以需要小伙伴们自己去装一下,因为我这里用的是docker,所以就简单介绍下在docker中使用xdebug的注意点. 1.在php ...
- Spring源码系列 — Bean生命周期
前言 上篇文章中介绍了Spring容器的扩展点,这个是在Bean的创建过程之前执行的逻辑.承接扩展点之后,就是Spring容器的另一个核心:Bean的生命周期过程.这个生命周期过程大致经历了一下的几个 ...
- 深入源码理解SpringBean生命周期
概述 本文描述下Spring的实例化.初始化.销毁,整个SpringBean生命周期,聊一聊BeanPostProcessor的回调时机.Aware方法的回调时机.初始化方法的回调及其顺序.销毁方法的 ...
- Spring源码 21 Bean生命周期
参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...
- 【源码】spring生命周期
一.spring生命周期 1. 实例化Bean 对于BeanFactory容器,当客户向容器请求一个尚未初始化的bean时,或初始化bean的时候需要注入另一个尚未初始化的依赖时,容器就会调用crea ...
- Spring源码之Bean生命周期
https://www.jianshu.com/p/1dec08d290c1 https://www.cnblogs.com/zrtqsk/p/3735273.html 总结 将class文件加载成B ...
- tomcat源码阅读之生命周期(LifeCycle)
一.事件机制流程: 1. 当外部事件源发生事件(比如点击了按钮,数据发生改变更新等)时,事件源将事件封装成事件对象Event: 2. 将事件对象交由对应的事件派发器Dispatcher ...
- Eureka源码探索(一)-客户端服务端的启动和负载均衡
1. Eureka源码探索(一)-客户端服务端的启动和负载均衡 1.1. 服务端 1.1.1. 找起始点 目前唯一知道的,就是启动Eureka服务需要添加注解@EnableEurekaServer,但 ...
随机推荐
- 浅谈SRT和NDI®在广电制作领域的技术优势和应用
随着技术的不断发展,用户对音视频质量的要求不断提升,对视频内容观看的方式也日趋多元化.摄像设备的分辨率从高清到4K,甚至有些厂家推出了6K或8K的产品:用户不再局限于从有线电视的直播节目中收看内容,智 ...
- ViewModel和LiveData问题思考与解答
嗨,大家好,面试真题系列又来了,今天我们说说MVVM架构里的两大组件:ViewModel和LiveData. 还是老样子,提出问题,做出解答. ViewModel 是什么? ViewModel 为什么 ...
- SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂)
SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂) 在实际开发过程中,经常会碰见一些比如系统启动初始化信息.统计在线人数.在线用户数.过滤敏/高词汇.访问权限控制(URL级别 ...
- import tensorflow 出现非法指令(核心已转储)
使用 conda install -c conda-forge tensorflow 或者 conda install -c conda-forge tensorflow-gpu 试下.
- 【QT】QThread源码浅析
本章会挑出QThread源码中部分重点代码来说明QThread启动到结束的过程是怎么调度的.其次因为到了Qt4.4版本,Qt的多线程就有所变化,所以本章会以Qt4.0.1和Qt5.6.2版本的源码来进 ...
- Qt混合Python开发技术:Python介绍、混合过程和Demo
前言 Qt中混合Python开发,可调用Python命令与脚本. Python Python是一种跨平台的计算机程序设计语言. 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语 ...
- Git撤销文件修改
在旧版本中,git的撤销工作区的文件修改是用git checkout -- <file>命令,由于容易漏了--导致和切换分支混肴,所以新版本中: - 使用git restore (--wo ...
- P6773 [NOI2020]命运
整体DP 很明显计算答案需要用容斥计算,如果暴力容斥的话,就是枚举哪些路径不符合条件,在这些路径的并集中的边都不能取,其他边任意取,设当前取了$i$条路径,那么对答案的贡献是$(-1)^i2^{n-1 ...
- linux下的终端利器----tmux
转:tmux 是指通过一个终端登录远程主机并运行后,在其中可以开启多个控制台的终端复用软件.类似GNU Screen,但来自于OpenBSD,采用BSD授权.使用它最直观的好处就是,通过一个终端登录远 ...
- 5.1 ICommand
1. CanExecute实现 只是将命令绑定到特定控件是不会触发CanExecute方法执行,该方法只是在实例化命令的时候才使用,其余如果需要触发该事件,只能通过后台代码组合触发,如更新一个后台类字 ...