当前位置：首页 > news >正文

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

news 2025/7/1 2:27:51

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

查看全文

http://www.lryc.cn/news/434906.html