HarmonyOS应用页面和自定义组件生命周期
1. 什么叫页面
页面
:即HarmonyOS
应用的UI
页面。
- 由一个或者多个
自定义组件
组成 @Entry
装饰的自定义组件为页面的入口组件,一个页面有且仅能有一个@Entry
- 只有被
@Entry
装饰的组件才可以调用页面的生命周期
2. 什么叫自定义组件
自定义组件
:@Component
装饰的UI单元。
- 可以组合多个系统组件实现UI的复用
- 可以调用组件的生命周期
3. 页面的生命周期
页面生命周期,即被@Entry
装饰的组件生命周期,提供以下生命周期接口:
onPageShow()
:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。onPageHide()
:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。onBackPress()
:当用户点击返回按钮时触发。
4. 自定义组件的生命周期
aboutToAppear()
:组件即将出现时回调,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。aboutToDisappear()
:在自定义组件析构销毁之前执行。
5. 一个页面的生命周期流程
被@Entry
装饰的组件(即页面)生命周期的流程图:
/**
* 被@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%')
}
}
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: 组件被销毁了