Angular学习笔记(二) - 生命周期钩子

1,199 阅读4分钟

生命周期函数简介

  • 当前版本:6.0.0-build

简介

指令和组件的实例有一个生命周期:新建、更新和销毁。 通过实现一个或多个 Angular core 库里定义的生命周期钩子接口,开发者可以介入该生命周期中的这些关键时刻。

这里写图片描述

分类

  • 指令与组件共有的钩子

    • ngOnChanges
    • ngOnInit
    • ngDoCheck
    • ngOnDestroy
  • 组件特有的钩子

    • ngAfterContentInit
    • ngAfterContentChecked
    • ngAfterViewInit
    • ngAfterViewChecked

调用顺序

  1. ngOnChanges - 当数据绑定输入属性的值发生变化时调用
  2. ngOnInit - 在第一次 ngOnChanges 后调用
  3. ngDoCheck - 自定义的方法,用于 angular 检测不到的或者不想检测的
  4. ngAfterContentInit - 在组件内容初始化之后调用,第一次 ngDoCheck() 之后调用,只调用一次。
  5. ngAfterContentChecked - 组件每次检查内容时调用,在每次调用 AfterContentInit 之后调用和每次的 Docheck 之后调用
  6. ngAfterViewInit - 初始化完组件视图及其子视图之后调用。第一次 ngAfterContentChecked() 之后调用,只调用一次。
  7. ngAfterViewChecked - 每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
  8. ngOnDestroy - 在 Angular 销毁指令/组件之前调用。

如何实现

要实现生命周期钩子,只需实现对应的接口即可,如实现 ngOnChanges 钩子只需实现 OnChanges 接口即可:

export class XxxComponents
  implements
    OnInit,
    OnChanges,
    DoCheck,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy {
  ngOnInit(): void {
    console.log("我是 ngOnInit");
  }

  ngOnChanges(): void {
    console.log("我是 OnChange");
  }

  ngDoCheck(): void {
    console.log("我是 ngDoCheck");
  }

  ngAfterContentInit(): void {
    console.log("我是 ngAfterContentInit");
  }

  ngAfterContentChecked(): void {
    console.log("我是 ngAfterContentChecked");
  }

  ngAfterViewInit(): void {
    console.log("我是 ngAfterViewInit");
  }

  ngAfterViewChecked(): void {
    console.log("我是 ngAfterViewChecked");
  }

  ngOnDestroy() {
    console.log("我是 ngOnDestroy");
  }
}

结果如下

这里写图片描述

ngOnChanges()

OnChanges只对输入的不可变对象起作用。输入属性:使用@Input装饰的属性。这里还需要注意不可变对象,在 Angular 中,典型的不可变对象是string类型,但所有自定义对象均为可变对象,如:user:{name:string},可变对象即使被定义为输入属性,也不会触发OnChanges方法。

ngOnChanges 方法参数

一旦检测到该组件(或指令)的输入属性发生了变化,Angular 就会调用它的 ngOnChanges() 方法。 ngOnChanges方法有一个SimpleChanges类型的参数,它其实是一个类型为SimpleChange,并且键值为属性名的数组:

export interface SimpleChanges { [propName: string]: SimpleChange; }

该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代,并记录它们。

OnInit() 钩子

使用OnInit()有两个原因: 1. 在构造函数之后马上执行复杂的初始化逻辑 2. 在Angular设置完输入属性之后,对该组件进行准备。

另外还要记住,在指令的构造函数完成之前,那些被绑定的输入属性还都没有值。 如果你需要基于这些属性的值来初始化这个指令,这种情况就会出问题。 而当 ngOnInit() 执行的时候,这些属性都已经被正确的赋值过了。

OnDestroy() 钩子

清理一些逻辑###必须###在Angular销毁指令之前运行,把它们放在ngOnDestory()中。 这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。 取消那些对可观察对象和 DOM 事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做,就会有导致内存泄露的风险。 路由跳转时。当一个路由地址跳往另一个路由地址时,前一个路由地址对应的组件会被销毁,后一个路由对应的组件会被创建。

DoCheck() 钩子

使用 DoCheck 钩子来检测那些 Angular 自身无法捕获的变更并采取行动。

DoCheck() 钩子的开销很恐怖,在每次变更检查周期之后,发生变化的地方都会调用它.

AfterView 钩子

AfterView 展示AfterViewInit()AfterViewChecked()钩子。

angular会在每次创建子组件的子视图后调用它们。

AfterContent 钩子

AfterContent 展示了AfterContentInit()AfterContentChecked()钩子。

Angular 会在外来内容被投影到组件中之后调用它们。

总结

Angular学习笔记(一) --- 之安装教程

系列学习文章还是继续更新,欢迎小伙伴加入。