【鸿蒙HarmonyOS NEXT】页面和自定义组件生命周期

一、环境说明

1. DevEco Studio 版本：
   

2. API版本：以12为主
   

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

需要明确几个概念：

1. 页面Page
   即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
   页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

   • onPageShow：页面每次显示时触发。
   • onPageHide：页面每次隐藏时触发一次。
   • onBackPress：当用户点击返回按钮时触发。

2. 自定义组件Component
   @Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
   组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

   • aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
   • aboutToDisappear：在自定义组件即将析构销毁时执行。

3. 当被@Entry和@Component装饰器同时装饰的页面的生命周期流程如下图所示
   
   需要注意的是，部分生命周期回调函数仅对@Entry修饰的自定义组件生效，它们分别是：onPageShow、onPageHide、onBackPress。

三、示例代码加以说明

1. 新建项目取名为pagelifecyc的工程，当工程被创建成功后，默认只有一个Index.ets页面。
2. 新建一个目录，取名为view。
3. 在view目录下新建一个ArkTS File，取名为TestComponent，使用@Component装饰器修饰，作为自定义组件，并实现aboutToAppear()和aboutToDisappear()函数，具体代码如下：

   /*** 自定义组件，生命周期测试*/
   @Preview  // 为了在单个自定义组件中查看效果，可以去掉
   @Component
   export struct TestComponent{// 定义数据用于List组件@State arr: number[] = [0,1,2,4,5,6,7,8,9]// 生命周期函数测试aboutToAppear(): void {console.info('--自定义组件被创建时，aboutToAppear函数被调用----')}aboutToDisappear(): void {console.info('--自定义组件被销毁时，aboutToDisappear函数被调用----')}/*** UI布局部分*/build() {Column(){List({space: 5}){ForEach(this.arr,(item: number)=> {ListItem(){Text(`项目${item}`).fontSize(15).fontWeight(FontWeight.Bold).width('100%').height(50).textAlign(TextAlign.Center).backgroundColor(0xF1F3F5)}})}}}
   }
   

4. 新建一个Page，取名为LifecycTestPage，默认已被@Entry和@Component装饰器装饰了。在该页面中实现引入TestComponent组件作为其子组件进行渲染，并实现onPageShow、onPageHide以及onBackPress函数，具体代码如下：

   /*** 用于测试页面生命周期*/
   import { TestComponent } from '../view/TestComponent';@Preview   // 为了在单页面中查看效果，可以去掉
   @Entry     // @Entry装饰的组件变成了页面
   @Component
   struct LifecycleTestPage {// 生命周期相关函数测试// 页面被创建时调用aboutToAppear(): void {console.info('--LifecycleTestPage页面被创建时，aboutToAppear函数被调用----')}// 页面被销毁时调用aboutToDisappear(): void {console.info('--LifecycleTestPage页面被销毁时，aboutToDisappear函数被调用----')}// 页面显示时调用onPageShow(): void {console.info('--LifecycleTestPage页面显示时，onPageShow函数被调用----')}// 页面隐藏时被调用onPageHide(): void {console.info('--LifecycleTestPage页面隐藏时，onPageHide函数被调用----')}// 返回键被点击时调用onBackPress(): boolean | void {console.info('--LifecycleTestPage页面返回键被点击时调用，onBackPress函数被调用----')}build() {Column() {// 引入自定义组件TestComponent()}.height('100%').width('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)}
   }
   

5. 在Index页面中添加跳转按钮，并引入路由，实现从Index页面跳转到LifecycTestPage页面中，具体代码如下：

   import { router } from '@kit.ArkUI';@Entry
   @Component
   struct Index {@State message: string = '生命周期测试';@State btnMsg: string = '跳转';build() {Column() {Text(this.message).fontSize(20).width('100%').height(50).textAlign(TextAlign.Center).backgroundColor(0xF1F3F5).margin({bottom: 100})Button(this.btnMsg).width('80%').height(50).onClick(()=>{router.pushUrl({url: 'pages/LifecycleTestPage'})})}.height('100%').width('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Start)}
   }
   

6. 保持在Index页面，并点击右侧的预览按钮，进行编译和显示Index页面
   页面效果：
   
   点击跳转按钮，观察页面跳转的时候，控制台打印的日志信息，如下所示：
   
   控制台打印出的日志如下：

   I     --LifecycleTestPage页面被创建时，aboutToAppear函数被调用----
   I     --自定义组件被创建时，aboutToAppear函数被调用----
   I     --LifecycleTestPage页面显示时，onPageShow函数被调用----
   

   点击预览界面手机顶部的退回按钮，观察页面跳转的时候，控制台打印的日志信息，如下所示：
   
   
   控制台打印出的日志如下：

   I     --LifecycleTestPage页面返回键被点击时调用，onBackPress函数被调用----
   I     --LifecycleTestPage页面隐藏时，onPageHide函数被调用----
   I     --LifecycleTestPage页面被销毁时，aboutToDisappear函数被调用----
   I     --自定义组件被销毁时，aboutToDisappear函数被调用----
   

四、小结

通过上述的说明和示例演示，相信大家已经很清楚Page页面和自定义组件的生命周期的区别了。细心的读者朋友可能已经发现在自定义组件中同样也可以编写onPageShow、onPageHide以及onBackPress等函数，感兴趣的读者朋友可以尝试下在自定义组件中编写onPageShow、onPageHide以及onBackPress等函数，看看这些函数是否在自定义组件也能被正常调用呢？欢迎大家的留言，我们在留言区进行讨论。