[Angular 基础] - 生命周期函数-Toy模板网

这篇具有很好参考价值的文章主要介绍了[Angular 基础] - 生命周期函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

[Angular 基础] - 生命周期函数

之前的笔记：

[Angular 基础] - Angular 渲染过程 & 组件的创建
[Angular 基础] - 数据绑定(databinding)
[Angular 基础] - 指令(directives)

以上为静态页面，即不涉及到跨组件交流的内容

以下涉及到组件内的沟通，从这开始数据就“活”了
[Angular 基础] - 自定义事件 & 自定义属性
[Angular 基础] - 视图封装 & 局部引用 & 父子组件中内容传递

看了一下，从 v2 开始的生命周期好像就没变过，这是从 archive 的 v2 官网上拉下来的一张图：

[Angular 基础] - 生命周期函数,# Angular,angular.js,javascript,前端

数量和顺序都是一样的，蓝色部分则是与投射(projection) 有关

这篇笔记相对而言比较枯燥是真的……也没办法……

constructor

虽然说生命周期函数里没有明确的包含构造函数，这里还是提一下

构造函数是最先运行的，同时这里的操作应该省时省力，不应该 触发任何的副作用，它唯一的作用就是对变量赋初始值

ngOnChanges

这是第一个调动的生命周期，也是调动最频繁的生命周期函数，组件中的变化都会触发这个函数的调用

官方文档中提到，如果当前组件内没有任何 @Input 的话，那么 ngOnChanges 就不会被调用。同样，因为同一个组件内只能存在一个 ngOnChanges，因此它的功能有点像 useEffect 的依赖数组中加上了所有的变量，或者对应的 class based component 中的 componentDidUpdate

实现如下：

export class ServerElementComponent {
  @Input('element') aliasElement: ServerElement;

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges in ServerElementComponent');
    console.log(changes);
  }
}

SimpleChanges 也是从 @angular/core 中导出的，数据结构如下：

class SimpleChange {
  constructor(previousValue: any, currentValue: any, firstChange: boolean);
  previousValue: any;
  currentValue: any;
  firstChange: boolean;
  isFirstChange(): boolean;
}

页面输出如下：

[Angular 基础] - 生命周期函数,# Angular,angular.js,javascript,前端

同样的代码我在 cockpit 和 server-element 都有输出，但是 cockpit 没有 @Input，因此 ngOnChanges 就没有触发

这就是上面中提到的，

当前组件内没有任何 @Input 的话，那么 ngOnChanges 就不会被调用

换言之，ngOnChanges 是针对 @Input 的变化而被调动的

⚠️：ref 不会引起 ngOnChanges 的调用，并且，如果被 @Input 绑定的对象的 reference 没有变化，也是不会引起 ngOnChanges 的调用

👀：如果优化做的比较好的话，ngOnChanges 能够有效的提升性能

ngOnInit

ngOnInit 会在 ngOnChanges 第一次后调用，如果 ngOnChanges 没有被触发，那么 ngOnInit 就是第一个调用生命周期函数。这个函数也类似于 componentDidMount，也就是 useEffect 中为空数组的实现，同理可证，这也是一个适合触发一个副作用的地方

具体实现如下：

  ngOnInit() {
    console.log('ngOnInit in CockpitComponent');
  }

效果如下：

[Angular 基础] - 生命周期函数,# Angular,angular.js,javascript,前端

ngDoCheck

ngDoCheck 会在 ngOnChanges 和 ngOnInit 运行后运行，不过对比 ngOnChanges 没有 @Input 就不会运行的情况，ngDoCheck 只要有变化，就会运行，这个变化包括 @Input、对象等

这也是一个类似于 componentDidUpdate 的生命周期函数

因为 ngDoCheck 会在每一次变化被感知后运行，所以这里也是和添加自定义的变化感知，如：

export class MyComponent implements DoCheck {
  @Input() items: any[];

  private oldItems: any[];

  ngDoCheck() {
    if (
      this.items &&
      this.oldItems &&
      this.items.length !== this.oldItems.length
    ) {
      console.log('Items array has changed');
    }
    this.oldItems = [...this.items];
  }
}

这样的实现比起直接将数据绑定到 @Input() 的优点就在于获取了 previous snapshot 的值，也就类似于 componentDidUpdate(prevProps, prevState, snapshot) 这里面的参数

但是如果 change 是和 @Input 进行绑定的，目前则是可以用 SimpleChanges 中的 firstChange + previousValue + currentValue 去解决，这样更加的方便快捷

几个使用 ngDoCheck 而不是 ngOnChanges 的场景：

检查更加复杂的对象，这一块之后学习到 KeyValueDiffers 再继续补全
事件触发，但是没有值的变化，如鼠标点击事件、键盘事件、冒泡事件等
异步的情况，如 subscribe 发生后的情况，这一部分也会在学到了异步操作后补全

本质上来说这也是一个事件触发

ngAfterContentInit

这个生命周期的调用是在 ngOnInit 后，ngDoCheck 后调用，并且只会被调用一次

说到 ngAfterContentInit 和 ngOnInit 的区别就需要简单的谈一下 Angular 的创造顺序：

父组件先被创建
子组件随后被创建
调用生命周期函数

ngOnInit 在这个地方被调用
投射内容

ngAfterContentInit 在这里被调用

这时候如果使用 ng-content 进行内容的投射，在内容透射完毕后，ngAfterContentInit 就会被调用以表示当前组件已经准备好了，可以完整的被渲染了

ng-content 部分的内容回顾在这里：[Angular 基础] - 视图封装 & 局部引用 & 父子组件中内容传递
View 层完成初始化

这里就是 ngAfterViewChecked 调用的地方

从顺序和结构上来说：

ngOnInit 适合初始化本组件需要的内容
ngAfterContentInit 适合初始化对投射内容具有依赖性的内容

这里同样可以查看一下生命周期调用时的输出结果，用的是前篇笔记的内容，不过只留下了 server-component 中的 ngOnInit 和 ngAfterContentInit：

[Angular 基础] - 生命周期函数,# Angular,angular.js,javascript,前端

可以看到，在 ngOnInit 调用的时候，@ContentChild('contentParagraph', { static: true }) paragraph: ElementRef; 这个内容是还没有投射的，因此输出 this.paragraph.nativeElement.textContent 就是一个空的字符串

在 ngAfterContentInit 运行时，也就是投射的内容已经初始化后，Angular 就可以获得 this.paragraph.nativeElement.textContent 中的内容了