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

最新推荐文章于 2024-10-13 23:01:22 发布

若兰幽竹

最新推荐文章于 2024-10-13 23:01:22 发布

阅读量1.8k

点赞数 20

分类专栏：鸿蒙开发文章标签： harmonyos

本文链接：https://blog.csdn.net/sujiangming/article/details/141976136

版权

鸿蒙开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

一、环境说明
二、页面和自定义组件生命周期
三、示例代码加以说明
四、小结

一、环境说明

DevEco Studio 版本：
API版本：以12为主

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

需要明确几个概念：

页面Page
即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：
- onPageShow：页面每次显示时触发。
- onPageHide：页面每次隐藏时触发一次。
- onBackPress：当用户点击返回按钮时触发。
自定义组件Component
@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
- aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
- aboutToDisappear：在自定义组件即将析构销毁时执行。
当被@Entry和@Component装饰器同时装饰的页面的生命周期流程如下图所示

需要注意的是，部分生命周期回调函数仅对@Entry修饰的自定义组件生效，它们分别是：onPageShow、onPageHide、onBackPress。

三、示例代码加以说明

新建项目取名为pagelifecyc的工程，当工程被创建成功后，默认只有一个Index.ets页面。
新建一个目录，取名为view。

在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)
         }
        })
      }
    }
  }
}

新建一个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)
  }
}

在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)
  }
}

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