Angular Component 生命周期钩子顺序

Posted on | In |
本文详细分析和说明了 Angular 生命周期钩子，并给出了使用建议。

本文详细分析和说明了 Angular 生命周期钩子，并给出了使用建议。

作者：前端咖秀
链接：https://www.jianshu.com/p/4ac9994e0f23

本文详细分析和说明了 Angular 生命周期钩子，并给出了使用建议。

1
2
3
4
5
6
7
8
ngOnChanges
ngOnInit
DoCheck(3x)
AfterContentInit
AfterContentChecked(3x)
AfterViewInit
AfterViewChecked(3x)
OnDestroy

注意：DoCheck,AfterContentChecked和AfterViewChecked这三种钩子被触发的次数很多，我们必须要精简这三种钩子的逻辑。

OnInit和OnDestroy

通过使用指令来发现一个元素什么时候被初始化或者被销毁。

  • 就像对组件一样，Angular也会对指令调用这些钩子方法
  • 使用指令可以使我们在不直接修改DOM实现代码的情况下，透视其内部细节
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { Directive, OnInit, OnDestroy } from '@angular/core';

    import { LoggerService } from './logger.service';

    let nextId = 1;

    // Spy on any element to which it is applied.
    // Usage: <div mySpy>...</div>
    @Directive({selector: '[mySpy]'})
    export class SpyDirective implements OnInit, OnDestroy {

      constructor(private logger: LoggerService) { }

      ngOnInit()    { this.logIt(`onInit`); }

      ngOnDestroy() { this.logIt(`onDestroy`); }

      private logIt(msg: string) {
        this.logger.log(`Spy #${nextId++} ${msg}`);
      }
    }
    把这个指令写到任何原生元素或者组件元素上，它会与所在的组件同时初始化和销毁
    1
    2
    3
    <div *ngFor="let hero of heroes" mySpy class="heroes">
      {{hero}}
    </div>
  • OnInit（）是组件获取初始数据最好的地方
  • OnDestroy（）用来释放那些不会被垃圾收集器自动回收的各类资源的地方，如取消那些对可观察对象和DOM事件的订阅；停止定时器；注销该指令曾注册到全局服务或应用级服务中的各种回调函数；如果不这么做，会导致内存泄漏的风险。

OnChanges()

一旦检测到该组件（或指令）的输入属性发生变化，Angular就会调用它的ngOnChanges（）方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Input() hero: Hero;
@Input() power: string;

changeLog: string[] = [];

ngOnChanges(changes: SimpleChanges) {
    for (let propName in changes) {
      let chng = changes[propName];
      let cur  = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
}
<div class="parent">
  <h2>{{title}}</h2>

  <table>
    <tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
    <tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
  </table>
  <p><button (click)="reset()">Reset Log</button></p>

  <on-changes [hero]="hero" [power]="power"></on-changes>
</div>
  • 当power属性的字符串值变化时，相应的日志就出现了
  • 但是，ngOnChanges并没有捕捉到hero.name的变化，Angular只会在输入属性的值变化时调用这个钩子，而hero属性的值是一个到hero对象的引用，Angular不会关注这个hero对象的name属性的变化，这个hero对象的引用并没有发生变化，于是，Angular不会报告什么变化。

DoCheck

使用DoCheck来检测Angular自身无法捕获的变更并采取行动
ngDoCheck()会被非常频繁的调用，需要使用轻量级的逻辑，否则会损害用户体验

通过捕获当前值和旧值进行比较

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//代码片段:
changeDetected = false;
changeLog: string[] = [];
oldHeroName = '';
oldPower = '';
oldLogLength = 0;
noChangeCount = 0;

ngDoCheck() {
    if (this.hero.name !== this.oldHeroName) {
      this.changeDetected = true;
      this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);
      this.oldHeroName = this.hero.name;
    }

    if (this.power !== this.oldPower) {
      this.changeDetected = true;
      this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);
      this.oldPower = this.power;
    }

    if (this.changeDetected) {
        this.noChangeCount = 0;
    } else {
        // log that hook was called when there was no relevant change.
        let count = this.noChangeCount += 1;
        let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
        if (count === 1) {
          // add new "no change" message
          this.changeLog.push(noChangeMsg);
        } else {
          // update last "no change" message
          this.changeLog[this.changeLog.length - 1] = noChangeMsg;
        }
    }

    this.changeDetected = false;
 }

AfterView

Angular会在每次创建来子视图之后调用AfterViewInit()和AfterViewChecked()钩子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';

import { LoggerService }  from './logger.service';

//////////////////
@Component({
  selector: 'app-child-view',
  template: '<input [(ngModel)]="hero">'
})
export class ChildViewComponent {
  hero = 'Magneta';
}

//////////////////////
@Component({
  selector: 'after-view',
  template: `
    <div>-- child view begins --</div>
      <app-child-view></app-child-view>
    <div>-- child view ends --</div>`
   + `
    <p *ngIf="comment" class="comment">
      {{comment}}
    </p>
  `
})
export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
  private prevHero = '';

  // Query for a VIEW child of type `ChildViewComponent`
  @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;

  constructor(private logger: LoggerService) {
    this.logIt('AfterView constructor');
  }

  ngAfterViewInit() {
    // viewChild is set after the view has been initialized
    this.logIt('AfterViewInit');
    this.doSomething();
  }

  ngAfterViewChecked() {
    // viewChild is updated after the view has been checked
    if (this.prevHero === this.viewChild.hero) {
      this.logIt('AfterViewChecked (no change)');
    } else {
      this.prevHero = this.viewChild.hero;
      this.logIt('AfterViewChecked');
      this.doSomething();
    }
  }

  comment = '';

  // This surrogate for real business logic sets the `comment`
  private doSomething() {
    let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
    if (c !== this.comment) {
      // Wait a tick because the component's view has already been checked
      this.logger.tick_then(() => this.comment = c);
    }
  }

  private logIt(method: string) {
    let child = this.viewChild;
    let message = `${method}: ${child ? child.hero : 'no'} child view`;
    this.logger.log(message);
  }
  // ...
}

//////////////
@Component({
  selector: 'after-view-parent',
  template: `
  <div class="parent">
    <h2>AfterView</h2>

    <after-view  *ngIf="show"></after-view>

    <h4>-- AfterView Logs --</h4>
    <p><button (click)="reset()">Reset</button></p>
    <div *ngFor="let msg of logs">{{msg}}</div>
  </div>
  `,
  styles: ['.parent {background: burlywood}'],
  providers: [LoggerService]
})
export class AfterViewParentComponent {
  logs: string[];
  show = true;

  constructor(private logger: LoggerService) {
    this.logs = logger.logs;
  }

  reset() {
    this.logs.length = 0;
    // quickly remove and reload AfterViewComponent which recreates it
    this.show = false;
    this.logger.tick_then(() => this.show = true);
  }
}

在更新comment之前，doSomething()方法都要等上一拍（tick）

  • Angular的单向数据流规则禁止在一个视图已经被组合好之后再更新视图，而这两个钩子都是在组件的视图已经被组合好后触发的，如果我们立即更新组件中被绑定的comment属性，Angular就会抛出一个错误，LoggerService.tick_then()方法延迟更新日志的一个回合（浏览器javascript周期回合）
  • Angular会频繁调用AfterViewChecked,需要注意精简代码

AfterContent

Angular会在外来内容被投影到组件中之后调用 AfterContentInit() 和 AfterContentChecked() 钩子
内容投影 是从组件外部导入HTML内容，并把它插入在组件模版中指定的位置上的一种途径
//父组件模版

1
2
3
`<after-content>
   <app-child></app-child>
 </after-content>`

被包含在标签中，永远不要在组件标签的内部放任何内容－－除非我们想把这些内容投影进这个组件中

//组件模版

1
2
3
4
template: `
  <div>-- projected content begins --</div>
    <ng-content></ng-content>
  <div>-- projected content ends --</div>`

标签是外来内容的占位符，它告诉Angular在哪里插入这些外来的内容，在这里，被投影进的内容就是来自父组件的标签

AfterView和AfterContent的不同点

AfterView钩子关心的是ViewChildren,这些子组件的元素标签会出现在该组件的模版里面
AfterContent钩子关心的是ContentChildren,这些子组件被Angular投影进该组件中
使用AfterContent不用担心单向数据流规则
Angular在每次调用AfterView钩子之前也会同时调用AfterContent,Angular在完成当前组件的视图合成之前，就已经合成了被投影内容的合成，所以仍然有机会修改视图