HarmonyOS鸿蒙学习条记（28）@entry和@Component的生命周期

HarmonyOS的生命周期可以分为@Compnent的生命周期和@Entry的生命周期，也就是自定义组件的生命周期和页面的生命周期。
@entry和@Component的关系

@Component生命周期

@Component即自定义组件，可以组合多个体系组件实现UI的复用，可以调用组件的生命周期。其生命周期有2个：
aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在实行其build()函数之前实行。
aboutToDisappear：aboutToDisappear函数在自定义组件析构烧毁之前实行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。不建议在生命周期aboutToDisappear内使用async await，假如在生命周期的aboutToDisappear使用异步操纵（Promise或者回调方法），自定义组件将被保存在Promise的闭包中，直到回调方法被实行完，这个行为阻止了自定义组件的垃圾回收。
@Entry生命周期

@Entry即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。其生命周期有三个方法
onPageShow：页面每次显示时触发一次，包罗路由过程、应用进入前台等场景。
onPageHide：页面每次隐藏时触发一次，包罗路由过程、应用进入背景等场景。
onBackPress：当用户点击返回按钮时触发。
生命周期流程图

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件（页面）生命周期。

可以看出先实行@Compent组件的aboutToAppear和build，然后在实行@Entry的onPageShow.逻辑也很简朴，只有先构建@Component组件，整个UI才华展示出来。
生命周期展示示例代码

以下示例展示了生命周期的调用时机：

1. // Index.ets
2. import router from '@ohos.router';
4. @Entry
5. @Component
6. struct MyComponent {
7.   @State showChild: boolean = true;
8.   @State btnColor:string = "#FF007DFF"
10.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
11.   onPageShow() {
12.     console.info('Index onPageShow');
13.   }
14.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
15.   onPageHide() {
16.     console.info('Index onPageHide');
17.   }
19.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
20.   onBackPress() {
21.     console.info('Index onBackPress');
22.     this.btnColor ="#FFEE0606"
23.     return true // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
24.   }
26.   // 组件生命周期
27.   aboutToAppear() {
28.     console.info('MyComponent aboutToAppear');
29.   }
31.   // 组件生命周期
32.   aboutToDisappear() {
33.     console.info('MyComponent aboutToDisappear');
34.   }
36.   build() {
37.     Column() {
38.       // this.showChild为true，创建Child子组件，执行Child aboutToAppear
39.       if (this.showChild) {
40.         Child()
41.       }
42.       // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
43.       Button('delete Child')
44.       .margin(20)
45.       .backgroundColor(this.btnColor)
46.       .onClick(() => {
47.         this.showChild = false;
48.       })
49.       // push到page页面，执行onPageHide
50.       Button('push to next page')
51.         .onClick(() => {
52.           router.pushUrl({ url: 'pages/page' });
53.         })
54.     }
56.   }
57. }
59. @Component
60. struct Child {
61.   @State title: string = 'Hello World';
62.   // 组件生命周期
63.   aboutToDisappear() {
64.     console.info('[lifeCycle] Child aboutToDisappear')
65.   }
66.   // 组件生命周期
67.   aboutToAppear() {
68.     console.info('[lifeCycle] Child aboutToAppear')
69.   }
71.   build() {
72.     Text(this.title).fontSize(50).margin(20).onClick(() => {
73.       this.title = 'Hello ArkUI';
74.     })
75.   }
76. }
78. //第二个页面 page.ets
79. @Entry
80. @Component
81. struct page {
82.   @State textColor: Color = Color.Black;
83.   @State num: number = 0
85.   onPageShow() {
86.     this.num = 5
87.   }
89.   onPageHide() {
90.     console.log("page onPageHide");
91.   }
93.   onBackPress() { // 不设置返回值按照false处理
94.     this.textColor = Color.Grey
95.     this.num = 0
96.   }
98.   aboutToAppear() {
99.     this.textColor = Color.Blue
100.   }
102.   build() {
103.     Column() {
104.       Text(`num 的值为：${this.num}`)
105.         .fontSize(30)
106.         .fontWeight(FontWeight.Bold)
107.         .fontColor(this.textColor)
108.         .margin(20)
109.         .onClick(() => {
110.           this.num += 5
111.         })
112.     }
113.     .width('100%')
114.   }
115. }

复制代码

以上示例中，Index页面包含两个自定义组件：

• 一个是被@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；
  
• 一个是Child，是MyComponent的子组件。
  
• 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build实行完毕 --> MyComponent build实行完毕 --> Index onPageShow。
  
• 点击“delete Child”，if绑定的this.showChild变成false，删除Child组件，会实行Child aboutToDisappear方法。谁消散就实行谁的 aboutToDisapper方法
  
• 点击“push to next page”，调用router.pushUrl接口，跳转到别的一个页面，当前Index页面隐藏，实行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有烧毁，所以只调用onPageHide。跳转到新页面后，实行初始化新页面的生命周期的流程。
  
• 假如调用的是router.replaceUrl，则当前Index页面被烧毁，实行的生命周期流程将变为：Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。可以看出组件的烧毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，（所谓皮之不存毛将焉附），然后实行初始化新页面的生命周期流程。
  
• 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被烧毁。
  
• 最小化应用或者应用进入背景，触发Index onPageHide。当前Index页面没有被烧毁，所以并不会实行组件的aboutToDisappear。应用回到前台，实行Index onPageShow。
  
• 退出应用，实行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。
  

参考资料

页面和自定义组件生命周期

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