1. 只有被@Entry装饰的组件才可以调用页面的生命周期。

• onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。
• onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。
• onBackPress：当用户点击返回按钮时触发。

2. 用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

• aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
• onDidBuild：组件build()函数执行完成之后回调该接口，不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。
• aboutToDisappear：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

3. 被@Entry 和@Component装饰的组件（页面）生命周期

image.png

4. 示例展示了生命周期的调用时机

// Index.ets
import { router } from '@kit.ArkUI';

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

 // 组件生命周期
 onDidBuild() {
   console.info('MyComponent onDidBuild');
 }

 // 组件生命周期
 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')
 }

 // 组件生命周期
 onDidBuild() {
   console.info('[lifeCycle] Child onDidBuild');
 }

 // 组件生命周期
 aboutToAppear() {
   console.info('[lifeCycle] Child aboutToAppear')
 }

 build() {
   Text(this.title)
     .fontSize(50)
     .margin(20)
     .onClick(() => {
       this.title = 'Hello ArkUI';
     })
 }
}

5. 自定义组件监听页面生命周期

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

// Index.ets
import { uiObserver, router, 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(() => {
          router.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`)
    }
  }
}