本文内容

这边来笔记一下在 Angular 中，有关元件的 life cycle 的内容。

lifecycle hooks

许多框架都有提供 lifecycle hooks 的功能给开发者做使用，当然 Angular 也不意外。 lifecycle hooks 的功能是让开发者能透过它们在元件不同的生命周期阶段，来做不同的事，比如说: 初始化... 等等。

其实不只有元件有属於它自己的 lifecycle hooks，包含了 directive(即: *ngIf 这种) 也含有自己的 lifecycle hooks 喔。

元件的 lifecycle hooks 我们大略可以拆成两类，一类是跟元件本身有关的，另一类是跟它的子元件有关的
元件本身有关的 lifecycle hooks
constructor()
OnInit
DoCheck
OnChanges
OnDestroy

元件子元件有关的 lifecycle hooks
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked

constructor() 建构式

大家在开发的时候，应该都有注意到元件的 ts 档案，是会包含自己的 class 的。
这代表了当 Anuglar 使用 new 搭配该元件的专属 class 来创建该类别底下的实例，也就是这个元件实例，那在创建实例的时候，就会进到属於它自己的建构式，也就是 constructor() 里面罗~

OnInit()

呼叫时机: 它会在第一次 ngOnChanges() 之後，被呼叫，而且只会被呼叫一次。

Note: 在官方文件中有建议我们在这个 lifecycle hook 做初始化设定是比较安全的，例如: 首度去远端 fetch 资料，并将取回来的资料加入到元件的属性中。

这个 lifecycle 对应到的 lifecycle hook 是 ngOnInit，写法如下
[TypeScript]

import { OnInit } from '@angular/core';
export class BComponent implements OnInit {
  @Input() books:string[] = []
  constructor() { }

  ngOnInit(): void {
    console.log('ngOnInit')
  }
}

constructor() 和 OnInit() 不同在哪?

它们不同在於它们所处的阶段不同。
constructor() 是处在 bootstrapping 阶段。而 OnInit() 是处在 change detection 阶段。
boostrapping 阶段就是 Angular 在创立专案中各个 service, component, directives 实例的时候。并会在这个时期将该元件有引入的相依内容传入该元件的 constructor() 中。

那 change detection 阶段，就是在 boostrapping 阶段结束之後发生。
什麽是 change detection 呢? 它是一种机制， Angular 透过这种机制来检查 元件/directive 的变化状态，并同时将其变化内容反映到其所属的 DOM 上。在专案档中应该都会有一个 Zone.js 的档案，Angular 就是利用它里面的内容来达到 change detection 这个机制的优~~

Summary

这边做个结论

1. 元件的 lifecycle hooks 大致可以分为两类，一类是有关元件本身，另一类是跟它的子元件有关
2. constructor() 和 OnInit() 之间的不同，和其使用时机。

Reference

1. LifeCycle Introduce
2. Advies for ngOnInit