angular2+系列——生命周期

概述

Angular2+（后面就直接用Angular代替了）中的每个组件都存在一个生命周期，从创建，变更到销毁。Angular提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力。熟悉这些生命钩子的实现，对于我们处理组件交互逻辑将会有很大帮助。

生命周期类型有：ngOnInit、ngOnChanges、ngDoCheck、ngContentInit、ngContentChecked、ngAfterViewInit、ngAfterViewChecked、ngOnDestory。

其实现方法如下：

export class ExampleComponent implements OnChanges, OnInit, DoCheck, AfterContentInit,
  AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  ngOnChanges() {
  }
  ngOnInit() {
  }
  ngDoCheck() {
  }
  ngAfterContentInit() {
  }
  ngAfterContentChecked() {
  }
  ngAfterViewInit() {
  }
  ngAfterViewChecked() {
  }
  ngOnDestroy() {
  }
}

执行顺序

一个组件的最小完整生命周期执行顺序如下：

执行顺序

注：angular中的每个组件都是typescript中一个加了@Component装饰器的class，所以在组件实例化时最先执行constructor()

下面着重选择了几个常用的生命钩子进行说明。

详细说明

ngOnChanges

ngOnChanges()在组件设置的绑定输入属性（如通过@Input、[(ngModel)]绑定）发生变化时执行，默认在组件初始化时于ngOnInit()前调用一次。

ngOnChanges()有一个默认的参数，它是一个SimpleChange对象，这个对象中记录了发生变化属性的前一个值和当前值。一般用法如下：

export class ExampleComponent implements OnChanges {

  @Input() value: any;

  ngOnChanges(simpleChanges: SimpleChanges) {
    if (simpleChanges.hasOwnProperty('value')) {
      // do something
    }
  }
}

ngOnInit

ngOnInit()在组件初始化时执行，并且整个生命周期只会执行一次。主要用于设置完输入属性后对组件进行准备，以及处理一些复杂的初始化逻辑。

这里需要注意一点，constructor()和ngOnInit()同样用于组件初始化时处理一些逻辑，但是我们应该避免复杂的构造函数逻辑。具体原因，Misko Hevery在他这篇文章中详细解释过。主要由于以下几点：

1. 复杂的构造函数逻辑，尤其是依赖其他组件、服务的逻辑会违背单一职责原则，并且不符合我们设计组件的理念，对于实现组件的灵活性与解耦不利；

2. 由于实例化一个对象时，constructor()必须执行，那么复杂的构造函数逻辑将会对于我们测试这个组件产生很大的麻烦；

3. 基于上一条，angular中每个组件实际上就是一个class，从面向对象的角度，它是可以被继承、重载的，所以，同理，测试复杂的构造函数的继承和重载对测试将无疑是一种灾难。

ngDoCheck、ngAfterContentChecked、ngAfterViewChecked

ngDoCheck主要用于检测Angular无法捕获的变更并进行处理，但是我觉得实际应用中应该避免使用这个钩子。因为这个钩子十分消耗性能，每次调用都会检测所有的属性和方法，并且触发机制十分敏感。实测中，轻轻划动下鼠标，这个方法就能触发几十次。

当然，如果非要用到这个钩子，建议在组件内设置个变量，保证ngDoCheck()内的逻辑在有限次内运行，从而避免性能的巨大消耗。

ngAfterContentChecked和ngAfterViewChecked，分别会在ngAfterContentInit和ngAfterViewInit后运行一次，主要用于组件内容检测和视图检测。但是我之所以放在这里和ngDoCheck一起介绍，是因为ngAfterContentChecked会在ngDoCheck每次调用后调用一次，而ngAfterViewChecked会在ngAfterContentChecked每次调用后调用一次。所以，鉴于ngDoCheck糟糕的性能，这两个也少用吧。

ngOnDestroy

ngOnDestroy在组件销毁前的最后一个节点运行，主要用于处理一些清理逻辑。我在使用过程中主要用来做两件事，一是用来释放一些gc不会自动回收的资源，二是用来释放一些业务逻辑中没有必要再使用的资源（如对一些Observable对象、DOM事件的订阅，全局服务的回调，以及localstorage中的数据）。这个对于我们防止内存泄露还是很有帮助的。

---

最后说两句，最近项目框架在从angularjs转向angular2+，已经初步进行了一段时间，这过程中也踩了不少坑。目前正在尝试着总结，先写了点自己认为比较重要的东西。总得来说，还是个搬运工吧。如果有对angular2+ 感兴趣的同学，也可以去这个网站(翻译得很良心)上学习，或者与我一起讨论，欢迎大家=。=