Angular 17+ 高级教程 – Component 组件 の 生命周期钩子 (Lifecycle Hooks)

前言

之前在 Component 组件 の Angular Component vs Custom Elements 文章中，我们有学习过几个基础的 Lifecycle Hooks。

比如 OnChanges、OnInit、AfterViewInit、OnDestroy，但那篇只是微微带过而已。

这篇让我们来深入理解 Angular 的 Lifecycle Hooks。

 文章来源地址https://www.toymoban.com/news/detail-837831.html

介绍

在 Component 组件 の Dependency Injection & NodeInjector 文章中，我们看见了组件从无到有的创建与渲染过程。

整个过程可以被分解成多个阶段，每一个阶段的组件都处于不同的形态。

比如

A 阶段，组件只是个 Definition。

B 阶段，组件已经被实例化，但是 Template 中的子组件尚未被实例化。

C 阶段，ViewModel 已经更新到 DOM 上。

等等

组件生命周期钩子的目的就是让我们有机会去拦截上面这些阶段，然后对组件做一些事情。

Angular 一共提供了 8 个钩子，它们是（排名不分先后）：

• OnInit
• OnChanges
• DoCheck
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked
• OnDestroy

如果加上组件 constructor 那就是 9 个钩子。

Constructor 阶段

想要深入理解组件生命周期钩子，最简单的方法自然是逛源码咯。

经历过了 Change Detection 和 NodeInjector 两篇文章。我相信大家对 bootstrapApplication 函数已经不陌生了，那我们直接进入重点吧。

组件实例化发生在什么时候？

bootstrapApplication 有两大环节，一个是 create，一个是 update。

所有的组件都会在 create 阶段被实例化。

ApplicationRef.bootstrap 方法中有这么一段

这里的重点是，所有组件（App 和其后裔）实例化都是在 create 阶段完成的。在进入 update 阶段之前，所有组件都是已经实例化好的了。

我们进入 ComponentFactory.create 方法看看 create 阶段实例化组件的细节。

renderView 函数的源码在 render.ts

所谓的 render 就是执行这个组件的 template 方法，这个方法会实例化所有的子组件。

这里的重点是，先实例化完所有子组件，然后才继续逐个 render 子组件。

renderChildComponents 函数

renderComponent 函数

组件实例化的顺序

依据上面的源码，它有 3 个重要的步骤

1. 实例化组件

2. render 组件 (也就是执行组件 template 方法，这方法会实例化所有子组件)。

3. 所有子组件实例化好了后，再逐个 render 子组件，这里就开始递归了，一直到所有后裔组件实例化完成。

我们来看个复杂点的例子

相同颜色表示它们在同一个组件 Template 里，号码表示组件被实例化的顺序。

我们需要搞清楚什么时候在同一层，什么时候去下一层。

1. 相同颜色的，一定是连贯的顺序

因为实例化子组件时，是不会进入下一层孙组件的，只有等到所有子组件实例化好后，才会往下一层孙组件走。

2. 路线图

constructor 阶段可以做什么？

constructor 的特别之处在于它是 injection context，所以它可以使用 inject 函数。

其它 Lifecycle Hooks 都不行哦。

我们通常会在 constructor 阶段注入组件需要的 Service，把它们存起来，供之后使用。

constructor 阶段不可以做什么？

constructor 阶段，@Input 属性值还没有被填写，它是不可用的。

8 大组件生命周期钩子 Overview

我们先 overview 这 8 个生命周期钩子：

1. 8 个 Lifecycle Hooks 全部发生在 refreshView 函数中，除了 DestroyHooks。(大名鼎鼎的 refreshView 函数在 Change Detection 文章中就介绍过了，不熟悉的请回去温习)

2. refreshView 会遍历所有组件，只要中途没有中断，所有组件的 Lifecycle Hooks 都有机会触发，当然如果中途断了，那剩余的组件就不会触发任何 Lifecycle Hooks 了。

3. OnInit、AfterContentInit、AfterViewInit 只会在第一次 refreshView 时触发，往后就不再触发了。

4. OnChanges 在每一次 refreshView 时，只要有 @Input 并且值发生了变化就会触发 (第一次赋值也算值变化)，如果没有变化就不会触发。

5. DoCheck、ngAfterContentChecked、ngAfterViewChecked 在每一次 refreshView 都会触发。

6. OnDestroy 只会在组件被销毁时触发，也只会触发一次。(我们还没有学到如何销毁组件，这个之后在 Dynamic Component 章节才会教)

PreOrderHooks (OnChanges, OnInit, DoCheck)

8 个 Lifecycle Hooks 全部发生在 refreshView 函数中，处了 DestroyHooks，那我们就从 refreshView 函数源码开始吧。

下面会有 4 中情况，我会一起讲，虽然可能有点乱，但没办法，分开讲篇幅会很长，很啰嗦。

1. refreshView(rootLView) 从 Root LView 开始

2. refreshView(appLView) 从 App LView 开始

3. 第一次 refreshView

4. 第 n 次 refreshView

refreshView 函数 の template 方法

refreshView 源码在这里 change_detection.ts

App 组件长这样

app.component.js

refreshView 第一件事是去执行 LView 的 template 方法，这个方法指的是组件 Definition 中的 template 方法 (上图)。

这个 template 方法，我们已经研究过许多次了。

create mode 主要负责实例化子组件，创建它们的 TNode、TView、LView、NodeInjector 等等。

update mode 主要负责把 ViewModel 和 binding syntax 结合，也就是 "更新 DOM" 啦。

此外 update mode 里还多了 2 个以前没有学过的新代码 ɵɵproperty 和 ɵɵadvance，我们来看看它们是做什么的。

ɵɵproperty 函数

ɵɵproperty 的作用是把 ViewModel binding 到子组件的 @Input 属性上。

ctx 就是组件实例，也就是所谓的 ViewModel 啦。

ɵɵadvance 函数

ɵɵadvance 有 2 个功能，一个是移位。一个是执行 PreOrderHooks。

移位

移位的概念是这样的：

假设 Template 长这样

我们来看看 TView 里的 preOrderHooks 和 preOrderCheckHooks 是指哪一些 Hooks。

export class C1Component implements OnChanges {
  @Input()
  value!: string;

  ngOnChanges(changes: SimpleChanges): void {
    const valueChange = changes['value'];
    if (valueChange.firstChange) {
      console.log('before after', [
        valueChange.previousValue, // undefined
        valueChange.currentValue, // value 2
      ]);
    }
  }
}

<!-- app.html -->
<app-child>
  <app-transclude-to-child></app-transclude-to-child>
</app-child>

<!-- child.html -->
<app-inside-child></app-inside-child>
<ng-content></ng-content>

<!-- inside-child.html -->
<p>inside-child works!</p>

<!-- transclude-to-child.html -->
<app-inside-transclude-to-child></app-inside-transclude-to-child>

<!-- inside-transclude-to-child.html -->
<p>inside-transclude-to-child works!</p>

export class AppComponent {
  constructor() {
    afterRender(() => {
      console.log('Hello World');
    });
  }
}

前言

我们在 这篇 和 这篇 中已经学习了几个基本的 Lifecycle Hooks. 分别是

constructor

OnInit

AfterContentInit

AfterViewInit

OnDestroy

OnChanges

这篇我们会把其余的 Lifecycle Hooks 都学完.

Init Group and Changes Group

Angular 的 Lifecycle 可以分为两组.

第一组有 constructor, OnInit, AfterContentInit, AfterViewInit, OnDestroy

第二组有 OnChanges, DoCheck, AfterContentChecked, AfterViewChecked

在 first time render 时, 上面两组都会跑. 但绝大部分情况下我们关心第一组就可以了.

而在 event 发生后, 我们更多的是会用到第二组.

所以我喜欢把它们分开两组看待.

Init Group Lifecycle Hooks (组件内视角)

在一个组件内部观察的话, Lifecycle Hooks 的顺序是这样的

constructor > OnInit > AfterContentInit > AfterViewInit > OnDestroy

下面我讲一下各个 hook 的特点

constructor 

1. 这个阶段 @Input 还没有被赋值, 都是 undefined. 

2. 这个阶段 inject parent 已经拿到组件实例了, 但这个实例的 @Input 也是 undefined. 

3. 这个阶段 query child 是连组件实例都没有的. 空空如也

4. 这个阶段, 组件 template 还没有 append 到 document

OnInit

1. 这个阶段 @Input 已经有值了.

2. 通常我们会在这个阶段去 ajax 什么的, 大部分代码都会写在这个阶段里.

3. 如果 @ViewChild / @ContentChild 配置 option static : true, 那么这个阶段已经可以拿到组件实例了, 但是这个组件是还没有 OnInit 的 (它的 @Input 都是 undefined)

4. 这个阶段组件 template 已经 append 到 document 了, 但是涉及 binding 的部分都没有 render 好 (empty)

AfterContentInit

1. 这个阶段 @ContentChild 已经可以拿到组件实例了, 而且这个组件已经 OnInit 好了 (但还没有 AfterViewInit 哦)

AfterViewInit

1. 这个阶段组件 template binding 的部分都 render 好了.

2. 通常这个阶段我们可以去 read DOM dimension, 比如 window.getComputedStyle 之类的

3. 这个阶段我们不应该再去修改 view model 了, 如果要修改那样配上 requestAnimationFrame, 让 Angular 进入下一个渲染周期 (这个是 Change Detection 概念, 这里不过多展开)

OnDestroy

1. 这个阶段 DOM 已经被移除了.

2. 通常我们在这个阶段释放资源, 比如 RxJS unsubscribe 等等.

Init Group Lifecycle Hooks (组件外视角)

上一 part 我们是站在一个组件内的视角去看 lifecycle hooks. 现在我们从外部看多个组件它们 lifecycle hooks 的顺序是怎样的.

首先我们有 5 个组件

App, Child, InsideChild, TranscludeToChild, InsideTranscludeToChild

all html

<!-- app.html -->
<app-child>
  <app-transclude-to-child></app-transclude-to-child>
</app-child>

<!-- child.html -->
<app-inside-child></app-inside-child>
<ng-content></ng-content>

<!-- inside-child.html -->
<p>inside-child works!</p>

<!-- transclude-to-child.html -->
<app-inside-transclude-to-child></app-inside-transclude-to-child>

<!-- inside-transclude-to-child.html -->
<p>inside-transclude-to-child works!</p>

source 在这里 Github – repository

先了解组件结构

app > child > inside child 这 3 个就是一层一层进, 

transclude-to-child 最特别, app.html 把 transclude-to-child 组件 transclude 到 child 组件.

最后 transclude-to-child > inside-transclude-to-child 就是进一层.

constructor, OnInit, AfterContentInit, AfterViewInit 的顺序.

constructor 环节

第一个环节是 constructor. Angular 会把所有组件都实例化出来先.

1. app constructor

然后进入 app.html

<app-child>
  <app-transclude-to-child></app-transclude-to-child>
</app-child>

接着

2. child constructor

3. transclude to child constructor

接着进入 child.html

<p>child works!</p>
<app-inside-child></app-inside-child>
<ng-content></ng-content>

4. inside child constructor

进入 inside-child.html

<p>inside-child works!</p>

这里没有组件需要实例化了. 返回最外面 app,html

<app-child>
  <app-transclude-to-child></app-transclude-to-child>
</app-child>

进入 transclude-to-child.html

<p>transclude-to-child works!</p>
<app-inside-transclude-to-child></app-inside-transclude-to-child>

5. inside transclude to child constructor

进入 inside-transclude-to-child.html

<p>inside-transclude-to-child works!</p>

没有组件需要实例化了. 

至此 constructor 环境结束. 以下是组件 constructor 的 console

OnInit > AfterContentInit > AfterViewInit 环节

和 constructor 不同, Angular 不会先把所有组件 OnInit 一遍才 AfterContentInit. OnInit 和 AfterContentInit 是前脚后脚一起的, 看下面例子理解.

1. app init

<body>
  <app-root></app-root>
</body>

由于 app-root 没有任何的 transclude, 所以 app 组件 AfterContentInit 紧跟着 OnInit 后就触发

2. app after content init

进入 app.html

<app-child>
  <app-transclude-to-child></app-transclude-to-child>
</app-child>

3. child init

由于 child 有 transclude 所以它的 AfterContentInit 不会马上触发.

4. transclude to child init

transclude to child 没有 transclude 所以 AfterContentInit 马上触发

5. transclude to child after content init

此时 child 的 transclude 完成了, 所以到它的 after content init 

6. child after content init

进入 child.html

<p>child works!</p>
<app-inside-child></app-inside-child>
<ng-content></ng-content>

7. inside child init

8. inside child after content init

进入 inside-child.html

<p>inside-child works!</p>

没有组件了, 所以开始 render view, 并且触发 AfterViewInit

9. inside child after view init

到目前为止的 console

回到 child.html

<p>child works!</p>
<app-inside-child></app-inside-child>
<ng-content></ng-content>

before render child component, 要先处理好 ng-content

这个 ng-content 内容是 transclude-to-child, 它已经 after content init 了.

进入 transclude-to-child.html

<p>transclude-to-child works!</p>
<app-inside-transclude-to-child></app-inside-transclude-to-child>

10. inside transclude to child init 

11. inside transclude to child after content init

进入 inside-transclude-to-child.html

<p>inside-transclude-to-child works!</p>

没组件了, render view

12. inside transclude to child after view init

回到 transclude-to-child.html

<p>transclude-to-child works!</p>
<app-inside-transclude-to-child></app-inside-transclude-to-child>

没有组件了, render view

13. transclude to child after view init

回到 child.html

<p>child works!</p>
<app-inside-child></app-inside-child>
<ng-content></ng-content>

ng-content 也完成了, 现在 render view

14. child after view init

回到 app.html

<app-child>
  <app-transclude-to-child></app-transclude-to-child>
</app-child>

15. app after view init 

最后的 console

Changes Group Lifecycle Hooks

我建议大家先学 Change Detection 在回来看这个部分. 

虽然 Changes Group Lifecycle Hooks 在 first time render 也会触发, 但很少会要用到, 

所以这里我 focus 的是后续 event 触发的 lifecycle.

DoCheck

DoCheck 发生在 parent 组件 detectChanges 之后.

比如 ApplicationRef.tick 会导致 AppComponent DoCheck 触发. 

如果 AppComponent 也被 detectChanges, 那么其每一个子组件都会进行 DoCheck, 以此类推.

通常我们会利用这个 DoCheck 判断这个组件需不需要 detectChanges, 如果需要那我们就 markForCheck 它, 让这个 detectChanges 机制从上到下持续执行.

通常我们不会在这个阶段去修改 view model, 当然你要改也是可以的. 它还没有到渲染期.

OnChanges

1. 每当 @Input 改变, 它就会触发, 包括 first time render (input from undefined to value) 也会.

2. 这个阶段我们任然可以去修改 view model.

AfterContentChecked

当 transclude 的内容渲染完成后触发.

如果我们组件内依赖 transclude 内容做一些事情. 那就可以在这个期间去 update 自生的 view model. 

这个期间可以修改当前组件的 view model, 但是不能修改 transclude 进来组件的 view model 哦, 因为 transclude 的部分已经渲染完成了.

AfterViewChecked

顾名思义, 就是当前组件渲染完毕后触发.

通常我们会在这个期间去做一些 DOM manipulation (比如获取 div 宽度/高度, 做一些设计).

这时不可以去修改 view model 了. 如果想修改, 那就需要用 window.requestAnimationFrame 让它触发下一次循环了. (通常不会有这种需求啦)

到了这里，关于Angular 17+ 高级教程 – Component 组件 の 生命周期钩子 (Lifecycle Hooks)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！