一、环境说明

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等函数，看看这些函数是否在自定义组件也能被正常调用呢？欢迎大家的留言，我们在留言区进行讨论。