HarmonyOS Next 自定义组件@Component的生命周期

2025-06-27 22:36:07
114次阅读
0个评论

Entry组件生命周期.png

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  //组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行
  aboutToAppear(): void {
    console.log('=========','aboutToAppear()')
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
  //组件build()函数执行完成之后回调该接口,在这个阶段进行埋点数据上报等不影响实际UI的功能
  onDidBuild(): void {
    console.log('=========','onDidBuild()')
  }
  //被@Entry装饰 页面每次显示时触发一次,包括路由过程、应用进入前台等场景
  onPageShow(): void {
    console.log('=========','onPageShow()')
  }
  //被@Entry装饰 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景
  onPageHide(): void {
    console.log('=========','onPageHide()')
  }
  //当用户点击返回按钮时触发。
  onBackPress(): boolean | void {
    console.log('=========','onBackPress()')
  }
  //在自定义组件析构销毁之前执行
  aboutToDisappear(): void {
    console.log('=========','aboutToDisappear()')
  }
}

页面回调打印.png

收藏00

登录 后评论。没有帐号? 注册 一个。