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

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

---

之前的笔记：

• [Angular 基础] - Angular 渲染过程 & 组件的创建

• [Angular 基础] - 数据绑定(databinding)

• [Angular 基础] - 指令(directives)

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

  以下涉及到组件内的沟通，从这开始数据就“活”了

• [Angular 基础] - 自定义事件 & 自定义属性

• [Angular 基础] - 视图封装 & 局部引用 & 父子组件中内容传递

---

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

数量和顺序都是一样的，蓝色部分则是与 投射(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);
  }
}
1
2
3
4
5
6
7
8

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

class SimpleChange {
  constructor(previousValue: any, currentValue: any, firstChange: boolean);
  previousValue: any;
  currentValue: any;
  firstChange: boolean;
  isFirstChange(): boolean;
}
1
2
3
4
5
6
7

页面输出如下：

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

这就是上面中提到的，

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

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

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