十一、页面和组件生命周期函数

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

onPageShow：页面每次显示时触发。

onPageHide：页面每次隐藏时触发一次。

onBackPress：当用户点击返回按钮时触发。（是手机下方的返回按钮，不是页面的路由返回）

建立两个page页面用于演示：

page1代码：

import router from '@ohos.router'
@Entry
@Component
struct LifeCycle1 {
  @State message: string = 'page1'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

      }
      .width('100%')
    }
    .height('100%')
    .onClick(() => {
      router.pushUrl({url:"pages/LifeCycle2"})
    })
  }

  // 页面展示
  onPageShow(){
    console.log('page1....onPageShow')
  }
  // 页面隐藏
  onPageHide(){
    console.log('page1....onPageHide')
  }
  // 页面返回-手机的下方的返回按钮
  onBackPress(){
    console.log('入口组件1....onBackPress')
  }




}

page2代码：

import router from '@ohos.router'
@Entry
@Component
struct LifeCycle2 {
  @State message: string = 'page2'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
    .onClick(() => {
        router.back()
    })
  }

  onPageShow(){
    console.log('page2...onPageShow')
  }
  onPageHide(){
    console.log('page2...onPageHide')
  }
  onBackPress(){
    console.log('page2...onBackPress')
  }



}

 

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

aboutToAppear：组件即将出现时回调该接口，具体时机为创建自定义组件的新实例后，在执行其build()函数之前执行。

aboutToDisappear：在自定义组件即将析构销毁组件时执行。

案例代码：

import router from '@ohos.router'
@Entry
@Component
struct LifeCycle1 {
  @State message: string = 'page1'
  @State isExist:boolean = true
  build() {
    Row() {
      Column({space:30}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
        Button('显示/隐藏').onClick(() => {
          this.isExist = !this.isExist
        })
        //根据isExist的状态来判断子组件是否显示
        if(this.isExist){
          LifeCycle1_son()
        }
      }
      .width('100%')
    }
    .height('100%')
    .onClick(() => {
      router.pushUrl({url:"pages/LifeCycle2"})
    })
  }

  // 页面展示
  onPageShow(){
    console.log('page1....onPageShow')
  }
  // 页面隐藏
  onPageHide(){
    console.log('page1....onPageHide')
  }
  // 页面返回-手机的下方的返回按钮
  onBackPress(){
    console.log('入口组件1....onBackPress')
  }
}

@Component
struct LifeCycle1_son{
  content:string = '子组件的内容...'
  build() {
    Column() {
      Text(this.content).fontSize(30)
    }
  }
  // 组件加载之前触发
  aboutToAppear(){
    console.log('LifeCycle1_son...aboutToAppear')
  }
  // 组件析构销毁时触发：删除 移除
  aboutToDisappear(){
    console.log('LifeCycle1_son...aboutToDisappear')
  }
}