第八节HarmonyOS @Component自界说组件的生命周期

在开始之前，我们先明确自界说组件和页面的关系：
1、自界说组件：@Component装饰的UI单位，可以组合多个系统组件实现UI的复用。
2、页面：即应用的UI页面。可以由一个大概多个自界说组件构成，@Entry装饰的自界说组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：
onPageShow：页面每次表现时触发。
onPageHide：页面每次隐藏时触发一次。
onBackPress：当用户点击返回按钮时触发。
组件生命周期，即一样平常用@Component装饰的自界说组件的生命周期，提供以下生命周期接口：
aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自界说组件的新实例后，在实行其build()函数之前实行。
aboutToDisappear：在自界说组件即将析构烧毁时实行。

有@Entity修饰的组件，既有页面的生命周期也有组件的生命周期：

1. // Index.ets
2. import router from '@ohos.router';
4. @Entry
5. @Component
6. struct LifeCycleComponent {
7.   @State showChild: boolean = true;
9.   // 只有被 @Entry 装饰的组件才可以调用页面的生命周期
10.   onPageShow() {
11.     console.info('Index onPageShow');
12.   }
13.   // 只有被 @Entry 装饰的组件才可以调用页面的生命周期
14.   onPageHide() {
15.     console.info('Index onPageHide');
16.   }
18.   // 只有被 @Entry 装饰的组件才可以调用页面的生命周期
19.   onBackPress() {
20.     console.info('Index onBackPress');
21.   }
23.   // 组件生命周期
24.   aboutToAppear() {
25.     console.info('LifeCycleComponent aboutToAppear');
26.   }
28.   // 组件生命周期
29.   aboutToDisappear() {
30.     console.info('LifeCycleComponent aboutToDisappear');
31.   }
33.   build() {
34.     Column() {
35.       // this.showChild 为 true，创建 Child 子组件，执行 Child aboutToAppear
36.       if (this.showChild) {
37.         Child()
38.       }
39.       // this.showChild 为 false，删除 Child 子组件，执行 Child aboutToDisappear
40.       Button('create or delete Child').onClick(() => {
41.         this.showChild = false;
42.       })
43.       // push 到 Page2 页面，执行 onPageHide
44.       Button('push to next page')
45.         .onClick(() => {
46.           router.pushUrl({ url: 'pages/Page2' });
47.         })
48.     }
50.   }
51. }

复制代码

无@Entity修饰的组件，只有组件的生命周期：

1. @Component
2. struct Child {
3.   @State title: string = 'Hello World';
4.   // 组件生命周期
5.   aboutToDisappear() {
6.     console.info('[lifeCycle] Child aboutToDisappear')
7.   }
8.   // 组件生命周期
9.   aboutToAppear() {
10.     console.info('[lifeCycle] Child aboutToAppear')
11.   }
13.   build() {
14.     Text(this.title).fontSize(50).onClick(() => {
15.       this.title = 'Hello ArkUI';
16.     })
17.   }
18. }

复制代码

总结：
第一个页面Index页面有@Entity修饰，第二个页面Second中无@Entity修饰
1、首次打开应用，加载的是Index页，生命周期是：

2、页面从index 跳转到 Second页，生命周期是：

3、在Second页将应用后台运行并且会前台：

4、页面从Second跳转到 index 页，生命周期是：

5、烧毁应用，，生命周期是：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。