ArkUI自定义组件：如何精准监听页面生命周期

目录

一、ArkUI 是什么？

二、页面与自定义组件的关系

2.1 定义

2.2 二者区别

三、页面生命周期详解

3.1 onPageShow

3.2 onPageHide

3.3 onBackPress

四、自定义组件生命周期详解

4.1 aboutToAppear

4.2 onDidBuild

4.3 aboutToDisappear

五、监听生命周期的代码示例

5.1 准备工作

5.2 代码实现

5.3 运行与验证

六、总结

---

一、ArkUI 是什么？

在移动应用开发的广袤宇宙中，ArkUI 就如同闪耀的星辰，逐渐崭露头角。ArkUI，全称方舟 UI 框架，是为 HarmonyOS 应用的 UI 开发精心打造的一套完整基础设施 。它就像是一个超级工具箱，里面装满了简洁的 UI 语法、丰富多样的 UI 组件、强大的布局系统、炫酷的动画效果以及灵敏的交互事件处理机制，甚至还配备了实时界面预览工具，为开发者开启了可视化界面开发的便捷之门。

举个例子，当我们想要搭建一个电商应用的界面时，ArkUI 提供的丰富组件就像是各种精美的积木。按钮组件可以是用户下单的 “确认键”，文本组件用来展示商品名称、价格等信息，列表组件则能有序地陈列各类商品。通过 ArkUI 的布局系统，我们能像搭积木一样，将这些组件巧妙地组合在一起，构建出布局合理、美观大方的商品展示页面、购物车页面等。

从开发范式来看，ArkUI 提供了两种不同风格的 “画笔”，供开发者绘制自己的 UI 蓝图。一种是基于 ArkTS 的声明式开发范式，它采用了在 TypeScript 声明式 UI 语法基础上扩展而来的 ArkTS 语言。这种开发范式就像是用自然语言描述一幅画，开发者可以直观地告诉框架自己想要的 UI 是什么样子，无需过多操心 UI 绘制和渲染的底层细节，开发过程高效又简洁。另一种是兼容 JS 的类 Web 开发范式，采用经典的 HML、CSS、JavaScript 三段式开发方式，对于熟悉 Web 前端开发的同学来说，就像回到了熟悉的战场，能快速将已有的 Web 应用改造成 ArkUI 框架应用 。在开发新应用时，基于 ArkTS 的声明式开发范式凭借其开发效率高、应用性能佳以及持续演进的优势，成为众多开发者的首选。

在整个应用的架构中，ArkUI 处于关键的前端展示层，负责与用户进行直接交互。它与后端的数据处理、逻辑运算等模块紧密协作，将后端提供的数据以直观、美观的界面形式呈现给用户，同时将用户的操作反馈及时传递给后端，是连接用户与应用核心功能的重要桥梁。正是因为 ArkUI 在构建用户界面方面如此重要，深入探索其自定义组件监听页面生命周期的奥秘，对于开发者打造出体验更加流畅、交互更加智能的应用具有非凡的意义。

二、页面与自定义组件的关系

2.1 定义

在 ArkUI 的世界里，页面和自定义组件就像是构成应用界面大厦的重要基石。页面，简单来说，就是应用呈现在用户眼前的一个个功能界面，比如电商应用中的商品展示页、用户的个人中心页等，它是用户与应用交互的直接窗口。在代码层面，被@Entry装饰器修饰的组件便是页面的入口组件，也就是整个页面的根节点 。就好比一个城市的地标建筑，是进入这个特定功能区域的起点，一个页面有且仅有一个@Entry装饰的组件。

自定义组件，则是开发者发挥创造力的结晶。它是由开发者将多个系统组件巧妙组合，封装而成的具有特定功能和复用性的 UI 单元。比如，在电商应用中，商品展示列表中的每一个商品展示模块可以被封装成一个自定义组件，包含商品图片、名称、价格等信息的展示结构。通过@Component装饰器来标记，告诉框架这是一个具有组件化能力的结构体 。开发者可以根据项目的需求，将这些自定义组件灵活地应用在不同的页面中，实现代码的高效复用。

2.2 二者区别

虽然页面和自定义组件都是构建界面的关键元素，但它们在生命周期调用方面有着明显的区别。只有被@Entry装饰的组件才能调用页面生命周期相关的接口，像onPageShow（页面每次显示时触发，包括路由过程、应用进入前台等场景）、onPageHide（页面每次隐藏时触发，包括路由过程、应用进入后台等场景）以及onBackPress（当用户点击返回按钮时触发） 。这些生命周期接口就像是页面的 “专属管家”，时刻监控着页面在不同场景下的状态变化。

而自定义组件，由@Component装饰，它有着自己独立的生命周期接口aboutToAppear（组件即将出现时回调，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行）和aboutToDisappear（在自定义组件析构销毁之前执行） 。可以把自定义组件的生命周期看作是一个小部件自身的 “出生” 与 “消亡” 过程，与页面整体的展示、隐藏等场景变化有所不同。这种区别使得开发者在开发过程中，需要根据不同的需求，在合适的生命周期中进行相应的操作，比如在页面的onPageShow中进行数据的加载，在自定义组件的aboutToAppear中进行组件内部的初始化设置等 。

三、页面生命周期详解

3.1 onPageShow

onPageShow是页面生命周期中一个非常重要的方法，它会在页面每次显示时触发一次，就像舞台上的幕布每次拉开，主角登场时的聚光灯亮起 。这个 “显示” 场景涵盖了多种情况，比如在应用的路由过程中，从一个页面跳转到当前页面时，onPageShow就会被触发。想象一下，在一个新闻类应用中，用户从新闻列表页面点击进入某条新闻的详情页面，此时详情页面的onPageShow方法就开始工作了 。

又比如，当应用从后台进入前台时，页面重新展示在用户眼前，onPageShow也会被调用。以社交类应用为例，用户在使用其他应用一段时间后，再次切换回社交应用，聊天页面、动态页面等就会触发onPageShow。这就为我们在页面展示时获取最新数据提供了绝佳时机。在onPageShow中，我们可以编写代码来请求服务器，获取最新的新闻内容、聊天消息等数据，并展示在页面上，确保用户看到的始终是最新的信息 。

3.2 onPageHide

onPageHide与onPageShow相对应，当页面每次隐藏时，这个方法就会被触发 。同样在路由过程中，当用户从当前页面跳转到其他页面时，当前页面就会隐藏，onPageHide随即生效。比如在一个电商应用中，用户从商品详情页跳转到购物车页面，商品详情页就会触发onPageHide。

当应用进入后台时，所有页面都将隐藏，onPageHide也会在各个页面被调用。在onPageHide中，我们通常会执行一些与页面隐藏相关的操作。比如，如果页面中有正在运行的定时器，像一些倒计时活动的定时器，在页面隐藏时就可以停止它，避免不必要的资源消耗 。还可以将页面的一些临时数据进行清理或保存，以便下次页面显示时能快速恢复到合适的状态 。

3.3 onBackPress

onBackPress方法主要在用户点击返回按钮时触发，它为我们提供了处理用户返回操作的能力 。当用户想要返回上一个页面时，这个方法就会被调用。我们可以利用这个方法实现一些自定义的返回逻辑，比如在一个笔记应用中，当用户点击返回按钮时，弹出一个确认框，询问用户是否保存当前编辑的笔记内容 。

通过onBackPress方法返回的布尔值，我们可以控制页面的返回行为。如果返回true，表示页面自己处理返回逻辑，不会进行默认的页面路由返回操作；如果返回false，则使用默认的返回逻辑，页面会按照系统默认的方式返回上一页；如果不返回值，也会被当作返回false处理 。

四、自定义组件生命周期详解

4.1 aboutToAppear

aboutToAppear函数就像是自定义组件诞生前的 “预备铃声” 。当创建自定义组件的新实例后，在执行其build()函数之前，aboutToAppear就会被回调 。在一个音乐播放应用中，我们创建了一个自定义的歌曲列表组件，当这个组件的实例被创建时，aboutToAppear就会被触发 。这时候，我们可以在aboutToAppear中进行一些数据的初始化操作，比如初始化歌曲列表的数据源，从本地数据库或者网络获取歌曲信息列表 。又比如在一个天气应用中，自定义的城市天气展示组件在aboutToAppear中可以初始化默认显示的城市信息，查询该城市的天气数据，为后续组件的显示做好充分准备 。在aboutToAppear函数中，是允许改变状态变量的，这些更改会在后续执行build()函数中生效 。

4.2 onDidBuild

onDidBuild函数是在自定义组件的build()函数执行完成后被回调的 。它就像是一场演出结束后的 “谢幕环节” 。当我们在构建一个电商应用的商品详情展示自定义组件时，在build()函数中完成了商品图片、名称、价格、描述等组件的构建后，onDidBuild就会被调用 。在这个阶段，非常适合进行一些埋点数据上报等操作，比如记录用户进入商品详情页面的时间、来源渠道等信息，将这些数据上报到服务器，用于后续的数据分析，了解用户的行为习惯和喜好 。需要注意的是，不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的 UI 表现，就好像在演出结束后，随意更改舞台布置会让观众感到困惑一样 。

4.3 aboutToDisappear

aboutToDisappear函数是在自定义组件析构销毁之前执行的 ，就像是一个演员即将离开舞台时的 “告别时刻” 。还是以电商应用为例，当用户在商品详情页面切换到其他页面，导致商品详情展示组件即将被销毁时，aboutToDisappear就会被执行 。在这个函数中，不允许改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定 。比如在一个社交应用中，自定义的聊天窗口组件在即将销毁时，如果随意修改状态变量，可能会导致聊天记录的显示异常或者数据丢失等问题 。在aboutToDisappear中，我们可以进行一些资源的清理工作，比如取消正在进行的网络请求（如果组件在销毁前有未完成的网络请求获取聊天记录等数据，就可以在这里取消，避免资源浪费和可能出现的错误）、停止动画（如果组件中有正在运行的动画效果，如聊天消息的发送动画等，可以在这里停止）、释放一些占用的内存资源等 。

五、监听生命周期的代码示例

5.1 准备工作

在开始代码示例之前，确保你已经搭建好了 ArkUI 的开发环境。如果还没有搭建，可前往华为开发者官网下载并安装 DevEco Studio，这是华为提供的用于 ArkUI 开发的官方集成开发环境 。安装完成后，创建一个新的 ArkUI 项目，选择基于 HarmonyOS 的空模板 “Empty Ability” 即可 。

5.2 代码实现

假设我们正在开发一个简单的新闻阅读应用，其中有一个自定义的新闻列表组件，我们来看看如何在这个组件中监听页面生命周期。

// 引入路由模块，用于页面跳转等操作

import router from '@ohos.router';

// 定义页面组件，@Entry表示这是页面的入口组件

@Entry

@Component

struct NewsPage {


// 用于控制新闻列表组件的显示与隐藏，这里假设可以通过开关控制是否显示新闻列表

@State showNewsList: boolean = true;

// 页面每次显示时触发，在这个函数中可以进行数据更新等操作，比如获取最新新闻列表数据

onPageShow() {


console.info('NewsPage onPageShow');

}

// 页面每次隐藏时触发，可用于保存一些临时数据或停止不必要的操作，比如停止新闻列表的自动刷新定时器

onPageHide() {


console.info('NewsPage onPageHide');

}

// 用户点击返回按钮时触发，可自定义返回逻辑，比如提示用户是否确认返回

onBackPress() {


console.info('NewsPage onBackPress');

}

build() {


Column() {


// 根据showNewsList的值决定是否显示新闻列表组件

if (this.showNewsList) {


NewsList()

}

// 按钮用于控制新闻列表组件的显示与隐藏，模拟一些业务场景下对组件显示状态的切换

Button('Toggle NewsList')

.onClick(() => {


this.showNewsList =!this.showNewsList;

})

// 按钮用于跳转到其他页面，模拟页面路由操作

Button('Go to OtherPage')

.onClick(() => {


router.pushUrl({ url: 'pages/OtherPage' });

})

}

}

}

// 定义新闻列表自定义组件

@Component

struct NewsList {


// 模拟新闻数据列表，这里简单用一个数组表示，实际开发中会从后端获取数据

@State newsData: string[] = ['News 1', 'News 2', 'News 3'];

// 组件即将出现时触发，在这个函数中可以进行组件数据的初始化等操作，比如从本地缓存读取新闻数据

aboutToAppear() {


console.info('NewsList aboutToAppear');

}

// 组件即将析构销毁时触发，可用于清理资源等操作，比如取消正在进行的新闻数据加载请求

aboutToDisappear() {


console.info('NewsList aboutToDisappear');

}

build() {


List() {


// 使用ForEach遍历新闻数据列表并渲染每个新闻项

ForEach(this.newsData, (news) => {


ListItem() {


Text(news)

}

})

}

}

}

5.3 运行与验证

将上述代码编写完成后，点击 DevEco Studio 工具栏上的 “Run” 按钮，选择一个模拟器或真机设备运行项目 。打开应用后，在控制台中可以看到如下输出：

当页面首次加载显示时，会输出 “NewsPage onPageShow” 和 “NewsList aboutToAppear”，这表明页面的onPageShow方法和新闻列表组件的aboutToAppear方法被触发，分别完成了页面展示和组件即将出现时的相关操作 。

当点击 “Toggle NewsList” 按钮隐藏新闻列表组件时，会输出 “NewsList aboutToDisappear”，表示组件即将销毁时的操作被执行 。再次点击显示新闻列表组件时，又会输出 “NewsList aboutToAppear” 。

当点击 “Go to OtherPage” 按钮跳转到其他页面时，会输出 “NewsPage onPageHide”，说明页面隐藏时的操作被触发 。当从其他页面返回时，又会输出 “NewsPage onPageShow” 。

通过这样的方式，我们可以清晰地验证页面生命周期函数和自定义组件生命周期函数的触发时机，方便我们在不同的时机进行相应的业务逻辑处理 。

六、总结

通过对 ArkUI 自定义组件监听页面生命周期的探索，我们深入了解了 ArkUI 的核心机制 。页面生命周期的onPageShow、onPageHide和onBackPress方法，就像是页面的 “导航灯”，引导着我们在页面展示、隐藏以及用户返回操作时，进行恰当的数据获取、资源清理和逻辑处理 。自定义组件的aboutToAppear、onDidBuild和aboutToDisappear方法，则是自定义组件的 “成长轨迹”，让我们在组件创建、构建完成以及销毁时，实现数据初始化、埋点上报和资源释放等功能 。

在实际的项目开发中，合理运用这些生命周期方法，能够让我们的应用更加高效、稳定 。比如在电商应用中，利用页面生命周期获取最新的商品数据、处理用户操作；通过自定义组件生命周期优化组件的展示和性能 。希望大家能够将所学知识运用到实际项目中，不断探索和创新，打造出更加优秀的 HarmonyOS 应用 。如果在实践过程中遇到问题，欢迎在评论区留言交流，让我们一起在 ArkUI 的开发之路上共同成长 。