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

2025-06-23
北京
本文字数：1113 字
阅读完需：约 4 分钟

router 页面生命周期，即被 @Entry 装饰的组件生命周期，提供以下生命周期接口： onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。 onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。 onBackPress：当用户点击返回按钮时触发。组件生命周期，即一般用 @Component 装饰的自定义组件的生命周期，提供以下生命周期接口： aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其 build()函数之前执行。 onDidBuild：组件 build()函数执行完成之后回调该接口，开发者可以在这个阶段进行埋点数据上报等不影响实际 UI 的功能。不建议在 onDidBuild 函数中更改状态变量、使用 animateTo 等功能，这可能会导致不稳定的 UI 表现。 aboutToDisappear：aboutToDisappear 函数在自定义组件析构销毁之前执行。不允许在 aboutToDisappear 函数中改变状态变量，特别是 @Link 变量的修改可能会导致应用程序行为不稳定。

@Entry@Componentstruct 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()')  }}