第十九讲_HarmonyOS应用页面和自定义组件生命周期

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

[1. 什么叫页面](#1. 什么叫页面)
[2. 什么叫自定义组件](#2. 什么叫自定义组件)
[3. 页面的生命周期](#3. 页面的生命周期)
[4. 自定义组件的生命周期](#4. 自定义组件的生命周期)
[5. 一个页面的生命周期流程](#5. 一个页面的生命周期流程)

1. 什么叫页面

页面：即HarmonyOS应用的UI页面。

由一个或者多个自定义组件组成
@Entry装饰的自定义组件为页面的入口组件，一个页面有且仅能有一个@Entry
只有被@Entry装饰的组件才可以调用页面的生命周期

2. 什么叫自定义组件

自定义组件：@Component装饰的UI单元。

可以组合多个系统组件实现UI的复用
可以调用组件的生命周期

3. 页面的生命周期

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

onPageShow()：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。
onPageHide()：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。
onBackPress()：当用户点击返回按钮时触发。

4. 自定义组件的生命周期

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

5. 一个页面的生命周期流程

被@Entry装饰的组件（即页面）生命周期的流程图：

typescript 复制代码

/**
 * 被@Component修饰就是一个组件
 * 被@Entry修饰的组件就是一个页面
 */
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  // 自定义组件的新实例后，在执行其build()函数之前执行
  aboutToAppear() {
    console.warn("组件被实例化了")
  }

  // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景
  onPageShow() {
    console.warn("页面被显示了");
  }

  // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景
  onPageHide() {
    console.warn("页面被隐藏了")
  }

  // 当用户点击返回按钮时触发
  onBackPress() {
    console.warn("返回")
  }

  // 自定义组件的新实例后，在执行其build()函数之前执行
  aboutToDisappear() {
    console.warn("组件被销毁了")
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

bash 复制代码

09-05 22:16:29.093 16926-23064/? W 0FEFE/JsApp: 组件被实例化了
09-05 22:16:29.094 16926-23064/? W 0FEFE/JsApp: 页面被显示了
09-05 22:16:42.125 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 页面被隐藏了
09-05 22:16:50.207 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 页面被显示了
09-05 22:16:53.945 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 返回
09-05 22:16:53.995 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 组件被销毁了