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/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpageshow)：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。
16
17- [onPageHide](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpagehide)：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。
18
19- [onBackPress](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onbackpress)：当用户点击返回按钮时触发。
20
21
22组件生命周期，即一般用\@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
23
24
25- [aboutToAppear](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear)：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
26
27- [onDidBuild](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#ondidbuild12)：组件build()函数执行完成之后回调该接口，开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。
28
29- [aboutToDisappear](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#abouttodisappear)：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
30
31
32生命周期流程如下图所示，下图展示的是被\@Entry装饰的组件（页面）生命周期。
33
34
35![zh-cn_image_0000001502372786](figures/zh-cn_image_0000001502372786.png)
36
37
38根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。
39
40
41## 自定义组件的创建和渲染流程
42
431. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
44
452. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
46
473. 如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
48
494. 在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在首次渲染的过程中，框架会记录状态变量和组件的映射关系，当状态变量改变时，驱动其相关的组件刷新。
50
515. 如果开发者定义了onDidBuild，则执行onDidBuild方法。
52
53
54## 自定义组件重新渲染
55
56当事件句柄被触发（比如设置了点击事件，即触发点击事件）改变了状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：
57
58
591. 框架观察到了变化，将启动重新渲染。
60
612. 根据框架持有的两个map（[自定义组件的创建和渲染流程](#自定义组件的创建和渲染流程)中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。
62
63
64## 自定义组件的删除
65
66如果if组件的分支改变，或者ForEach循环渲染中数组的个数改变，组件将被删除：
67
68
691. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，前端节点已经没有引用时，将被JS虚拟机垃圾回收。
70
712. 自定义组件和它的变量将被删除，如果其有同步的变量，比如[@Link](arkts-link.md)、[@Prop](arkts-prop.md)、[@StorageLink](arkts-appstorage.md#storagelink)，将从[同步源](arkts-state-management-overview.md#基本概念)上取消注册。
72
73
74不建议在生命周期aboutToDisappear内使用async await，如果在生命周期的aboutToDisappear使用异步操作（Promise或者回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。
75
76
77以下示例展示了生命周期的调用时机：
78
79
80
81```ts
82// Index.ets
83import { router } from '@kit.ArkUI';
84
85@Entry
86@Component
87struct MyComponent {
88  @State showChild: boolean = true;
89  @State btnColor:string = "#FF007DFF";
90
91  // 只有被@Entry装饰的组件才可以调用页面的生命周期
92  onPageShow() {
93    console.info('Index onPageShow');
94  }
95  // 只有被@Entry装饰的组件才可以调用页面的生命周期
96  onPageHide() {
97    console.info('Index onPageHide');
98  }
99
100  // 只有被@Entry装饰的组件才可以调用页面的生命周期
101  onBackPress() {
102    console.info('Index onBackPress');
103    this.btnColor ="#FFEE0606";
104    return true // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
105  }
106
107  // 组件生命周期
108  aboutToAppear() {
109    console.info('MyComponent aboutToAppear');
110  }
111
112  // 组件生命周期
113  onDidBuild() {
114    console.info('MyComponent onDidBuild');
115  }
116
117  // 组件生命周期
118  aboutToDisappear() {
119    console.info('MyComponent aboutToDisappear');
120  }
121
122  build() {
123    Column() {
124      // this.showChild为true，创建Child子组件，执行Child aboutToAppear
125      if (this.showChild) {
126        Child()
127      }
128      // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
129      Button('delete Child')
130        .margin(20)
131        .backgroundColor(this.btnColor)
132        .onClick(() => {
133        this.showChild = false;
134      })
135      // push到page页面，执行onPageHide
136      Button('push to next page')
137        .onClick(() => {
138          router.pushUrl({ url: 'pages/page' });
139        })
140    }
141  }
142}
143
144@Component
145struct Child {
146  @State title: string = 'Hello World';
147  // 组件生命周期
148  aboutToDisappear() {
149    console.info('[lifeCycle] Child aboutToDisappear');
150  }
151
152  // 组件生命周期
153  onDidBuild() {
154    console.info('[lifeCycle] Child onDidBuild');
155  }
156
157  // 组件生命周期
158  aboutToAppear() {
159    console.info('[lifeCycle] Child aboutToAppear');
160  }
161
162  build() {
163    Text(this.title)
164      .fontSize(50)
165      .margin(20)
166      .onClick(() => {
167        this.title = 'Hello ArkUI';
168      })
169  }
170}
171```
172```ts
173// page.ets
174@Entry
175@Component
176struct page {
177  @State textColor: Color = Color.Black;
178  @State num: number = 0;
179
180  onPageShow() {
181    this.num = 5;
182  }
183
184  onPageHide() {
185    console.log("page onPageHide");
186  }
187
188  onBackPress() { // 不设置返回值按照false处理
189    this.textColor = Color.Grey;
190    this.num = 0;
191  }
192
193  aboutToAppear() {
194    this.textColor = Color.Blue;
195  }
196
197  build() {
198    Column() {
199      Text(`num 的值为：${this.num}`)
200        .fontSize(30)
201        .fontWeight(FontWeight.Bold)
202        .fontColor(this.textColor)
203        .margin(20)
204        .onClick(() => {
205          this.num += 5;
206        })
207    }
208    .width('100%')
209  }
210}
211```
212
213以上示例中，Index页面包含两个自定义组件，一个是被\@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；一个是Child，是MyComponent的子组件。只有\@Entry装饰的节点才可以使页面级别的生命周期方法生效，因此在MyComponent中声明当前Index页面的页面生命周期函数（onPageShow / onPageHide / onBackPress）。MyComponent和其子组件Child分别声明了各自的组件级别生命周期函数（aboutToAppear / onDidBuild/aboutToDisappear）。
214
215
216- 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> MyComponent onDidBuild--> Child aboutToAppear --> Child build --> Child onDidBuild --> Index onPageShow。
217
218- 点击“delete Child”，if绑定的this.showChild变成false，删除Child组件，会执行Child aboutToDisappear方法。
219
220
221- 点击“push to next page”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。
222
223- 如果调用的是router.replaceUrl，则当前Index页面被销毁，上文已经提到，组件的销毁是从组件树上直接摘下子树,所以执行的生命周期流程将变为：新页面的初始化生命周期流程，然后执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。
224
225- 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被销毁。
226
227- 最小化应用或者应用进入后台，触发Index onPageHide。当前Index页面没有被销毁，所以并不会执行组件的aboutToDisappear。应用回到前台，执行Index onPageShow。
228
229
230- 退出应用，执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。
231
232## 自定义组件监听页面生命周期
233
234使用[无感监听页面路由](../reference/apis-arkui/js-apis-arkui-observer.md#observeronrouterpageupdate11)的能力，能够实现在自定义组件中监听页面的生命周期。
235
236```ts
237// Index.ets
238import { uiObserver, router, UIObserver } from '@kit.ArkUI';
239
240@Entry
241@Component
242struct Index {
243  listener: (info: uiObserver.RouterPageInfo) => void = (info: uiObserver.RouterPageInfo) => {
244    let routerInfo: uiObserver.RouterPageInfo | undefined = this.queryRouterPageInfo();
245    if (info.pageId == routerInfo?.pageId) {
246      if (info.state == uiObserver.RouterPageState.ON_PAGE_SHOW) {
247        console.log(`Index onPageShow`);
248      } else if (info.state == uiObserver.RouterPageState.ON_PAGE_HIDE) {
249        console.log(`Index onPageHide`);
250      }
251    }
252  }
253  aboutToAppear(): void {
254    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
255    uiObserver.on('routerPageUpdate', this.listener);
256  }
257  aboutToDisappear(): void {
258    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
259    uiObserver.off('routerPageUpdate', this.listener);
260  }
261  build() {
262    Column() {
263      Text(`this page is ${this.queryRouterPageInfo()?.pageId}`)
264        .fontSize(25)
265      Button("push self")
266        .onClick(() => {
267          router.pushUrl({
268            url: 'pages/Index'
269          })
270        })
271      Column() {
272        SubComponent()
273      }
274    }
275  }
276}
277@Component
278struct SubComponent {
279  listener: (info: uiObserver.RouterPageInfo) => void = (info: uiObserver.RouterPageInfo) => {
280    let routerInfo: uiObserver.RouterPageInfo | undefined = this.queryRouterPageInfo();
281    if (info.pageId == routerInfo?.pageId) {
282      if (info.state == uiObserver.RouterPageState.ON_PAGE_SHOW) {
283        console.log(`SubComponent onPageShow`);
284      } else if (info.state == uiObserver.RouterPageState.ON_PAGE_HIDE) {
285        console.log(`SubComponent onPageHide`);
286      }
287    }
288  }
289  aboutToAppear(): void {
290    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
291    uiObserver.on('routerPageUpdate', this.listener);
292  }
293  aboutToDisappear(): void {
294    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
295    uiObserver.off('routerPageUpdate', this.listener);
296  }
297  build() {
298    Column() {
299      Text(`SubComponent`)
300    }
301  }
302}
303```
304