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才华展示出来。
生命周期展示示例代码

以下示例展示了生命周期的调用时机:
  1. // Index.ets
  2. import router from '@ohos.router';
  3. @Entry
  4. @Component
  5. struct MyComponent {
  6.   @State showChild: boolean = true;
  7.   @State btnColor:string = "#FF007DFF"
  8.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
  9.   onPageShow() {
  10.     console.info('Index onPageShow');
  11.   }
  12.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
  13.   onPageHide() {
  14.     console.info('Index onPageHide');
  15.   }
  16.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
  17.   onBackPress() {
  18.     console.info('Index onBackPress');
  19.     this.btnColor ="#FFEE0606"
  20.     return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理
  21.   }
  22.   // 组件生命周期
  23.   aboutToAppear() {
  24.     console.info('MyComponent aboutToAppear');
  25.   }
  26.   // 组件生命周期
  27.   aboutToDisappear() {
  28.     console.info('MyComponent aboutToDisappear');
  29.   }
  30.   build() {
  31.     Column() {
  32.       // this.showChild为true,创建Child子组件,执行Child aboutToAppear
  33.       if (this.showChild) {
  34.         Child()
  35.       }
  36.       // this.showChild为false,删除Child子组件,执行Child aboutToDisappear
  37.       Button('delete Child')
  38.       .margin(20)
  39.       .backgroundColor(this.btnColor)
  40.       .onClick(() => {
  41.         this.showChild = false;
  42.       })
  43.       // push到page页面,执行onPageHide
  44.       Button('push to next page')
  45.         .onClick(() => {
  46.           router.pushUrl({ url: 'pages/page' });
  47.         })
  48.     }
  49.   }
  50. }
  51. @Component
  52. struct Child {
  53.   @State title: string = 'Hello World';
  54.   // 组件生命周期
  55.   aboutToDisappear() {
  56.     console.info('[lifeCycle] Child aboutToDisappear')
  57.   }
  58.   // 组件生命周期
  59.   aboutToAppear() {
  60.     console.info('[lifeCycle] Child aboutToAppear')
  61.   }
  62.   build() {
  63.     Text(this.title).fontSize(50).margin(20).onClick(() => {
  64.       this.title = 'Hello ArkUI';
  65.     })
  66.   }
  67. }
  68. //第二个页面 page.ets
  69. @Entry
  70. @Component
  71. struct page {
  72.   @State textColor: Color = Color.Black;
  73.   @State num: number = 0
  74.   onPageShow() {
  75.     this.num = 5
  76.   }
  77.   onPageHide() {
  78.     console.log("page onPageHide");
  79.   }
  80.   onBackPress() { // 不设置返回值按照false处理
  81.     this.textColor = Color.Grey
  82.     this.num = 0
  83.   }
  84.   aboutToAppear() {
  85.     this.textColor = Color.Blue
  86.   }
  87.   build() {
  88.     Column() {
  89.       Text(`num 的值为:${this.num}`)
  90.         .fontSize(30)
  91.         .fontWeight(FontWeight.Bold)
  92.         .fontColor(this.textColor)
  93.         .margin(20)
  94.         .onClick(() => {
  95.           this.num += 5
  96.         })
  97.     }
  98.     .width('100%')
  99.   }
  100. }
复制代码
以上示例中,Index页面包含两个自定义组件:

参考资料

页面和自定义组件生命周期

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4