鸿蒙.png 鸿蒙的生命周期分为三种，分别是UIAbility生命周期，页面生命周期，组件生命周期。

UIAbility生命周期

UIAbility-生命周期

UIAbility的生命周期在EntryAbility.ets文件中。

UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态，如下图所示：

EnteryAbility.ets文件函数执行顺序

首先执行onCreate()，用于执行初始化和设置业务逻辑
执行onWindowStageCreated(windowStatge:window.WindowStage)创建一个窗口。windowStage.loadContent(url，（）=>{})加载页面，这个页面是程序打开的页面。url默认是pages/index，url可以进行更改。
执行onForeground()在前台展示
关闭程序或者返回执行onWindowStageDestroy()。Ability 的生命周期回调，当应用从后台切换到前台时调用。
隐藏切换到后台onBackground()。Ability 的生命周期回调，当应用从前台切换到后台时调用。
销毁程序onDestroy()。用于执行资源清理和其他清理操作。

下图展示WindowStageCreate和WindowStageDestroy状态

页面生命周期

页面中写有@Entry修饰符的都可以写页面生命周期，提供以下生命周期接口：

onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。在执行其build()函数之后触发
onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。
onBackPress：当用户点击返回按钮时触发。

组件生命周期

页面中写有@Component修饰符的都可以写入组件生命周期，提供以下生命周期接口：

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

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件（首页）生命周期。

0000000000011111111.20240115115417.19084898994421050948770894591938_50001231000000_2800_A35F79D99F20173F0309774937C4BCBD554915F61D2B6D5A985BF64B529E6178.png

根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。

import router from '@ohos.router'
@Entry
@Component
struct StartPage {
  @State message: string = 'Hello World'

  // 在build之前触发，只触发一次
  aboutToAppear(){
    console.log("页面初始化")
  }
  // 销毁  清理定时器
  aboutToDisappear(){
    console.log("页面销毁")
  }

  // build之后触发，可以触发多次
  onPageShow(){
    console.log("页面展示")
  }

  // 触发多次，前台---后台   跳转隐藏
  onPageHide(){
    console.log("页面隐藏")
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button("OnePage").onClick(()=>{
          router.pushUrl({
            url:'pages/router/OnePage'
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

OnePage页面的代码

import router from '@ohos.router'
@Entry
@Component
struct OnePage {
  @State message: string = 'One Page'

  onBackPress(){
    console.log('testTag','回退-----StartPage')
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button("回退").onClick(()=>{
          router.back()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}