• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 页面和自定义组件生命周期
2
3
4在开始之前，我们先明确自定义组件和页面的关系：
5
6
7- 自定义组件：\@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
8
9- 页面：即应用的UI页面。可以由一个或者多个自定义组件组成，\@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个\@Entry。只有被\@Entry装饰的组件才可以调用页面的生命周期。
10
11
12页面生命周期，即被\@Entry装饰的组件生命周期，提供以下生命周期接口：
13
14
15- [onPageShow](../reference/arkui-ts/ts-custom-component-lifecycle.md#onpageshow)：页面每次显示时触发。
16
17- [onPageHide](../reference/arkui-ts/ts-custom-component-lifecycle.md#onpagehide)：页面每次隐藏时触发一次。
18
19- [onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress)：当用户点击返回按钮时触发。
20
21
22组件生命周期，即一般用\@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
23
24
25- [aboutToAppear](../reference/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear)：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
26
27- [aboutToDisappear](../reference/arkui-ts/ts-custom-component-lifecycle.md#abouttodisappear)：在自定义组件即将析构销毁时执行。
28
29
30生命周期流程如下图所示，下图展示的是被\@Entry装饰的组件（首页）生命周期。
31
32
33![zh-cn_image_0000001502372786](figures/zh-cn_image_0000001502372786.png)
34
35
36根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。
37
38
39## 自定义组件的创建和渲染流程
40
411. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
42
432. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
44
453. 如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
46
474. 在首次渲染的时候，执行build方法渲染系统组件，如果有自定义子组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：
48   1. 状态变量 -> UI组件（包括ForEach和if）。
49   2. UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。
50
51
52   ```ts
53   build() {
54     ...
55     this.observeComponentCreation(() => {
56       Button.create();
57     })
58
59     this.observeComponentCreation(() => {
60       Text.create();
61     })
62     ...
63   }
64   ```
65
66
67当应用在后台启动时，此时应用进程并没有销毁，所以仅需要执行onPageShow。
68
69
70## 自定义组件重新渲染
71
72当事件句柄被触发（比如设置了点击事件，即触发点击事件）改变了状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：
73
74
751. 框架观察到了变化，将启动重新渲染。
76
772. 根据框架持有的两个map（自定义组件的创建和渲染流程中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。
78
79
80## 自定义组件的删除
81
82如果if组件的分支改变，或者ForEach循环渲染中数组的个数改变，组件将被删除：
83
84
851. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，当前端节点已经没有引用时，将被JS虚拟机垃圾回收。
86
872. 自定义组件和它的变量将被删除，如果其有同步的变量，比如[@Link](arkts-link.md)、[@Prop](arkts-prop.md)、[@StorageLink](arkts-appstorage.md#storagelink)，将从[同步源](arkts-state-management-overview.md#基本概念)上取消注册。
88
89
90不建议在生命周期aboutToDisappear内使用async await，如果在生命周期的aboutToDisappear使用异步操作（Promise或者回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。
91
92
93以下示例展示了生命周期的调用时机：
94
95
96
97```ts
98// Index.ets
99import router from '@ohos.router';
100
101@Entry
102@Component
103struct MyComponent {
104  @State showChild: boolean = true;
105
106  // 只有被@Entry装饰的组件才可以调用页面的生命周期
107  onPageShow() {
108    console.info('Index onPageShow');
109  }
110  // 只有被@Entry装饰的组件才可以调用页面的生命周期
111  onPageHide() {
112    console.info('Index onPageHide');
113  }
114
115  // 只有被@Entry装饰的组件才可以调用页面的生命周期
116  onBackPress() {
117    console.info('Index onBackPress');
118  }
119
120  // 组件生命周期
121  aboutToAppear() {
122    console.info('MyComponent aboutToAppear');
123  }
124
125  // 组件生命周期
126  aboutToDisappear() {
127    console.info('MyComponent aboutToDisappear');
128  }
129
130  build() {
131    Column() {
132      // this.showChild为true，创建Child子组件，执行Child aboutToAppear
133      if (this.showChild) {
134        Child()
135      }
136      // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
137      Button('delete Child').onClick(() => {
138        this.showChild = false;
139      })
140      // push到Page2页面，执行onPageHide
141      Button('push to next page')
142        .onClick(() => {
143          router.pushUrl({ url: 'pages/Page2' });
144        })
145    }
146
147  }
148}
149
150@Component
151struct Child {
152  @State title: string = 'Hello World';
153  // 组件生命周期
154  aboutToDisappear() {
155    console.info('[lifeCycle] Child aboutToDisappear')
156  }
157  // 组件生命周期
158  aboutToAppear() {
159    console.info('[lifeCycle] Child aboutToAppear')
160  }
161
162  build() {
163    Text(this.title).fontSize(50).onClick(() => {
164      this.title = 'Hello ArkUI';
165    })
166  }
167}
168```
169
170
171以上示例中，Index页面包含两个自定义组件，一个是被\@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；一个是Child，是MyComponent的子组件。只有\@Entry装饰的节点才可以生效页面的生命周期方法，所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时声明了组件的生命周期函数。
172
173
174- 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。
175
176- 点击“delete Child”，if绑定的this.showChild变成false，删除Child组件，会执行Child aboutToDisappear方法。
177
178
179- 点击“push to next page”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。
180
181- 如果调用的是router.replaceUrl，则当前Index页面被销毁，执行的生命周期流程将变为：Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到，组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisAppear，然后执行初始化新页面的生命周期流程。
182
183- 点击返回按钮，触发页面生命周期Index onBackPress。最小化应用或者应用进入后台，触发Index onPageHide。这两个状态下应用都没有被销毁，所以并不会执行组件的aboutToDisappear 。应用回到前台，执行Index onPageShow。
184
185
186- 退出应用，执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。
187