ToB企服应用市场:ToB评测及商务社交产业平台
标题:
HarmonyOS鸿蒙学习条记(28)@entry和@Component的生命周期
[打印本页]
作者:
大连密封材料
时间:
2024-8-30 21:24
标题:
HarmonyOS鸿蒙学习条记(28)@entry和@Component的生命周期
HarmonyOS的生命周期可以分为@Compnent的生命周期和@Entry的生命周期,也就是自定义组件的生命周期和页面的生命周期。
@entry和@Component的关系
@Component生命周期
@Component即自定义组件,可以组合多个体系组件实现UI的复用,可以调用组件的生命周期。其生命周期有2个:
aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在实行其build()函数之前实行。
aboutToDisappear:aboutToDisappear函数在自定义组件析构烧毁之前实行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。
不建议在生命周期aboutToDisappear内使用async await,假如在生命周期的aboutToDisappear使用异步操纵(Promise或者回调方法),自定义组件将被保存在Promise的闭包中,直到回调方法被实行完,这个行为阻止了自定义组件的垃圾回收。
@Entry生命周期
@Entry即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。其生命周期有三个方法
onPageShow:页面每次显示时触发一次,包罗路由过程、应用进入前台等场景。
onPageHide:页面每次隐藏时触发一次,包罗路由过程、应用进入背景等场景。
onBackPress:当用户点击返回按钮时触发。
生命周期流程图
生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。
可以看出先实行@Compent组件的aboutToAppear和build,然后在实行@Entry的onPageShow.逻辑也很简朴,只有先构建@Component组件,整个UI才华展示出来。
生命周期展示示例代码
以下示例展示了生命周期的调用时机:
// Index.ets
import router from '@ohos.router';
@Entry
@Component
struct MyComponent {
@State showChild: boolean = true;
@State btnColor:string = "#FF007DFF"
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageShow() {
console.info('Index onPageShow');
}
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageHide() {
console.info('Index onPageHide');
}
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onBackPress() {
console.info('Index onBackPress');
this.btnColor ="#FFEE0606"
return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理
}
// 组件生命周期
aboutToAppear() {
console.info('MyComponent aboutToAppear');
}
// 组件生命周期
aboutToDisappear() {
console.info('MyComponent aboutToDisappear');
}
build() {
Column() {
// this.showChild为true,创建Child子组件,执行Child aboutToAppear
if (this.showChild) {
Child()
}
// this.showChild为false,删除Child子组件,执行Child aboutToDisappear
Button('delete Child')
.margin(20)
.backgroundColor(this.btnColor)
.onClick(() => {
this.showChild = false;
})
// push到page页面,执行onPageHide
Button('push to next page')
.onClick(() => {
router.pushUrl({ url: 'pages/page' });
})
}
}
}
@Component
struct Child {
@State title: string = 'Hello World';
// 组件生命周期
aboutToDisappear() {
console.info('[lifeCycle] Child aboutToDisappear')
}
// 组件生命周期
aboutToAppear() {
console.info('[lifeCycle] Child aboutToAppear')
}
build() {
Text(this.title).fontSize(50).margin(20).onClick(() => {
this.title = 'Hello ArkUI';
})
}
}
//第二个页面 page.ets
@Entry
@Component
struct page {
@State textColor: Color = Color.Black;
@State num: number = 0
onPageShow() {
this.num = 5
}
onPageHide() {
console.log("page onPageHide");
}
onBackPress() { // 不设置返回值按照false处理
this.textColor = Color.Grey
this.num = 0
}
aboutToAppear() {
this.textColor = Color.Blue
}
build() {
Column() {
Text(`num 的值为:${this.num}`)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(this.textColor)
.margin(20)
.onClick(() => {
this.num += 5
})
}
.width('100%')
}
}
复制代码
以上示例中,Index页面包含两个自定义组件:
一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;
一个是Child,是MyComponent的子组件。
应用冷启动的初始化流程为:MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build实行完毕 --> MyComponent build实行完毕 --> Index onPageShow。
点击“delete Child”,if绑定的this.showChild变成false,删除Child组件,会实行Child aboutToDisappear方法。
谁消散就实行谁的 aboutToDisapper方法
点击“push to next page”,调用router.pushUrl接口,跳转到别的一个页面,当前Index页面隐藏,实行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口,Index页面被隐藏,并没有烧毁,所以只调用onPageHide。跳转到新页面后,实行初始化新页面的生命周期的流程。
假如调用的是router.replaceUrl,则当前Index页面被烧毁,实行的生命周期流程将变为:Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。可以看出
组件的烧毁是从组件树上直接摘下子树,所以先调用父组件的aboutToDisappear,再调用子组件的aboutToDisappear,(所谓皮之不存毛将焉附),然后实行初始化新页面的生命周期流程。
点击返回按钮,触发页面生命周期Index onBackPress,且触发返回一个页面后会导致当前Index页面被烧毁。
最小化应用或者应用进入背景,触发Index onPageHide。当前Index页面没有被烧毁,
所以并不会实行组件的aboutToDisappear。
应用回到前台,实行Index onPageShow。
退出应用,实行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。
参考资料
页面和自定义组件生命周期
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4