【HarmonyOS】HarmonyOS NEXT学习日记：七、页面与组件的生命周期
页面和组件
- 组件：用@Component装饰的代码称为自定义组件
- 页面：@Entry装饰的组件即页面的根节点
组件生命周期
aboutToAppear：在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。
aboutToDisappear：在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
页面生命周期
onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。
onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。
onBackPress：当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理。
代码示例
// Index.ets
import text from '@ohos.graphics.text'
import { router } from '@kit.ArkUI';
// 导入业务错误处理模块
import { BusinessError } from '@kit.BasicServicesKit';
@Builder function TextItem(text: string){
Text(text)
.fontSize(18)
.fontColor(Color.Red)
.backgroundColor('#ccc')
.lineHeight(30)
.width('100%')
.textAlign(TextAlign.Center)
.onClick(()=>{
router.pushUrl({ url: 'pages/Second' }).then(() => { // 调用 router 模块的 pushUrl 方法跳转到第二页
console.info('Succeeded in jumping to the second page.') // 在控制台输出跳转成功的日志信息
}).catch((err: BusinessError) => { // 捕捉跳转过程中的错误
console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`) // 在控制台输出跳转失败的错误信息，包括错误代码和错误信息
})
})
}
@Entry
@Component
struct Index {
@State text: string = '111'
@State showChildren: boolean = false;
onPageShow() {
this.text = 'onPageShow';
console.info('IndexComponent onPageShow');
}
onPageHide() {
this.text = 'onPageHide';
console.info('IndexComponent onPageHide');
}
aboutToAppear(){
this.text = '222'
console.info('IndexComponent aboutToAppear');
}
aboutToDisappear(){
console.info('IndexComponent aboutToDisappear');
}
build() {
Column(){
TextItem(this.text)
if(this.showChildren){
Child()
}
Button('修改children可见')
.onClick(()=>{
this.showChildren = !this.showChildren
})
}
}
}
@Component
struct Child {
@State title: string = 'Children';
aboutToDisappear() {
console.info('Child aboutToDisappear')
}
aboutToAppear() {
console.info('Child aboutToAppear')
}
build() {
Text(this.title).fontSize(50).onClick(() => {
this.title = 'Children Changed';
})
}
}
页面初始化结束后
可以看到的是，我们定义text变量时赋值的‘111’在aboutToAppear中已经被修改为‘222’了，最终渲染出来的就是‘222’；
从日志中我们可以观察到，aboutToDisappear的执行时机在onPageShow之前。
然后我们点击跳转一下页面（离开页面）
日志如下
组件并未被销毁，所以没有进入aboutToDisappear，但是因为离开了页面，所以进入了onPageHide。
当我们再次返回index页面（进入页面）
将会再次触发onPageShow，每一次页面显示时都会触发。
那么当我们点击按钮呢？（创建组件）
chidren子组件被渲染了出来，也出发了子组件的aboutToAppear。
再次点击按钮（销毁组件）
将会触发子组件的销毁进入aboutToDisappear，同时页面上的子组件也消失不见。
总结
页面显示
|
| ActivityA:onPageShow |
|---|
| ------ 组件生命周期 ------ |
|
组件将要出现
|
| CustomComponent:aboutToAppear |
|---|
|
组件的渲染和交互
|
用户按下返回按钮
|
| ActivityA:onBackPress |
|---|
|
组件将要消失
|
| CustomComponent:aboutToDisappear |
|---|
|
页面隐藏
|
| ActivityA:onPageHide |
|---|
