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

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

使用无感监听页面路由的能力，能够实现在自定义组件中监听页面的生命周期。

// Index.ets
import { uiObserver, UIObserver } from '@kit.ArkUI';
@Entry
@Component
struct Index {
  listener: (info: uiObserver.RouterPageInfo) => void = (info: uiObserver.RouterPageInfo) => {
    let routerInfo: uiObserver.RouterPageInfo | undefined = this.queryRouterPageInfo();
    if (info.pageId == routerInfo?.pageId) {
      if (info.state == uiObserver.RouterPageState.ON_PAGE_SHOW) {
        console.log(`Index onPageShow`);
      } else if (info.state == uiObserver.RouterPageState.ON_PAGE_HIDE) {
        console.log(`Index onPageHide`);
      }
    }
  }


  aboutToAppear(): void {
    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
    uiObserver.on('routerPageUpdate', this.listener);
  }


  aboutToDisappear(): void {
    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
    uiObserver.off('routerPageUpdate', this.listener);
  }


  build() {
    Column() {
      Text(`this page is ${this.queryRouterPageInfo()?.pageId}`)
        .fontSize(25)
      Button("push self")
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: 'pages/Index' });
        })
      Column() {
        SubComponent()
      }
    }
  }
}


@Component
struct SubComponent {
  listener: (info: uiObserver.RouterPageInfo) => void = (info: uiObserver.RouterPageInfo) => {
    let routerInfo: uiObserver.RouterPageInfo | undefined = this.queryRouterPageInfo();
    if (info.pageId == routerInfo?.pageId) {
      if (info.state == uiObserver.RouterPageState.ON_PAGE_SHOW) {
        console.log(`SubComponent onPageShow`);
      } else if (info.state == uiObserver.RouterPageState.ON_PAGE_HIDE) {
        console.log(`SubComponent onPageHide`);
      }
    }
  }


  aboutToAppear(): void {
    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
    uiObserver.on('routerPageUpdate', this.listener);
  }


  aboutToDisappear(): void {
    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
    uiObserver.off('routerPageUpdate', this.listener);
  }


  build() {
    Column() {
      Text(`SubComponent`)
    }
  }
}