• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 自定义组件生命周期
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiyujia926; @huyisuo-->
5<!--Designer: @zhangboren-->
6<!--Tester: @TerryTsao-->
7<!--Adviser: @zhang_yixin13-->
8
9自定义组件生命周期，即用[@Component](arkts-create-custom-components.md#component)或[@ComponentV2](arkts-new-componentV2.md)装饰的自定义组件的生命周期，提供以下生命周期接口：
10
11
12- [aboutToAppear](../../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear)：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build函数之前执行。
13
14- [onDidBuild](../../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#ondidbuild12)：在组件首次渲染触发的build函数执行完成之后回调该接口，后续组件重新渲染将不回调该接口。开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。
15
16- [aboutToDisappear](../../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#abouttodisappear)：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
17
18> **说明：**
19>
20> 页面生命周期及其相关内容参考[页面路由](../arkts-routing.md#生命周期)。
21
22自定义组件生命周期流程如下图所示。
23
24
25![custom-component-lifecycle-demo1](figures/custom-component-lifecycle-demo1.png)
26
27
28根据上面的流程图，接下来从自定义组件的初始创建、重新渲染和删除来详细说明。
29
30
31## 自定义组件的创建和渲染流程
32
331. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
34
352. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
36
373. 如果开发者定义了aboutToAppear，则执行build方法之前执行该方法。
38
394. 在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在首次渲染的过程中，框架会记录状态变量和组件的映射关系，当状态变量改变时，驱动其相关的组件刷新。
40
415. 如果开发者定义了onDidBuild，则执行build方法之后执行该方法。
42
43## 自定义组件重新渲染
44
45当触发事件（比如点击）改变状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：
46
471. 框架观察到变化，启动重新渲染。
48
492. 根据框架记录的状态变量和组件的映射关系，仅刷新发生变化的状态变量所关联的组件，实现最小化更新。
50
51## 自定义组件的删除
52
53例如if组件的分支改变或ForEach循环渲染中数组的个数改变，组件将被移除：
54
551. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，前端节点已经没有引用时，将被Ark虚拟机垃圾回收。
56
572. 自定义组件和它的变量将被删除，如果组件有同步的变量（如[@Link](arkts-link.md)、[@Prop](arkts-prop.md)、[@StorageLink](arkts-appstorage.md#storagelink)），将从[同步源](arkts-state-management-overview.md#基本概念)上取消注册。
58
59不建议在生命周期`aboutToDisappear`中使用`async await`。如果在此生命周期中使用异步操作（如 Promise 或回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法执行完毕，这会阻止自定义组件的垃圾回收。
60
61## 自定义组件嵌套使用与示例
62
63通过以下示例，来详细说明自定义组件在嵌套使用时，自定义组件生命周期的调用时序：
64
65```ts
66// Index.ets
67@Entry
68@Component
69struct Parent {
70  @State showChild: boolean = true;
71  @State btnColor: string = '#FF007DFF';
72
73  // 组件生命周期
74  aboutToAppear() {
75    console.info('Parent aboutToAppear');
76  }
77
78  // 组件生命周期
79  onDidBuild() {
80    console.info('Parent onDidBuild');
81  }
82
83  // 组件生命周期
84  aboutToDisappear() {
85    console.info('Parent aboutToDisappear');
86  }
87
88  build() {
89    Column() {
90      // this.showChild为true，创建Child子组件，执行Child aboutToAppear
91      if (this.showChild) {
92        Child()
93      }
94      Button('delete Child')
95        .margin(20)
96        .backgroundColor(this.btnColor)
97        .onClick(() => {
98          // 更改this.showChild为false，删除Child子组件，执行Child aboutToDisappear
99          // 更改this.showChild为true，添加Child子组件，执行Child aboutToAppear
100          this.showChild = !this.showChild;
101        })
102    }
103  }
104}
105
106@Component
107struct Child {
108  @State title: string = 'Hello World';
109
110  // 组件生命周期
111  aboutToDisappear() {
112    console.info('Child aboutToDisappear');
113  }
114
115  // 组件生命周期
116  onDidBuild() {
117    console.info('Child onDidBuild');
118  }
119
120  // 组件生命周期
121  aboutToAppear() {
122    console.info('Child aboutToAppear');
123  }
124
125  build() {
126    Text(this.title)
127      .fontSize(50)
128      .margin(20)
129      .onClick(() => {
130        this.title = 'Hello ArkUI';
131      })
132  }
133}
134```
135
136以上示例中，Index页面包含两个自定义组件，一个是Parent，一个是Child，Parent及其子组件Child分别声明了各自的自定义组件生命周期函数（aboutToAppear / onDidBuild / aboutToDisappear）。
137
138- 应用冷启动的初始化流程为：Parent aboutToAppear --&gt; Parent build --&gt; Parent onDidBuild --&gt; Child aboutToAppear --&gt; Child build --&gt; Child onDidBuild。此处体现了自定义组件懒展开特性，即Parent执行完onDidBuild之后才会执行Child组件的aboutToAppear。日志输出信息如下：
139
140```ts
141Parent aboutToAppear
142Parent onDidBuild
143Child aboutToAppear
144Child onDidBuild
145```
146
147- 点击Button按钮，更改showChild为false，删除Child组件，执行Child aboutToDisappear方法。
148
149- 如果直接退出应用，则会触发以下生命周期：Parent aboutToDisappear --&gt; Child aboutToDisappear，此处体现了自定义组件删除顺序也是从父到子。日志输出信息如下：
150
151```ts
152Parent aboutToDisappear
153Child aboutToDisappear
154```
155
156- 最小化应用或者应用进入后台，当前Index页面未被销毁，所以并不会执行组件的aboutToDisappear。
157
158- 如果showChild的默认值为false，则应用冷启动的初始化流程为：Parent aboutToAppear --&gt; Parent build --&gt; Parent onDidBuild。日志输出信息如下：
159
160```ts
161Parent aboutToAppear
162Parent onDidBuild
163```
164- 如果showChild的默认值为false，直接退出应用，则只执行Parent aboutToDisappear方法。
165
166- 如果showChild的默认值为false，此时点击Button按钮，更改showChild为true，添加Child组件，添加流程为：Child aboutToAppear --&gt; Child build --&gt; Child onDidBuild。日志输出信息如下：
167
168```ts
169Child aboutToAppear
170Child onDidBuild
171```
172当showchild为默认值true时，该示例的生命周期流程图如下所示：
173
174![custom-component-lifecycle-demo2](figures/custom-component-lifecycle-demo2.png)