一、鸿蒙ArkTS/ArkUI实战-页面和自定义组件生命周期

作者: ISwiftUI | 来源:发表于2023-11-13 17:06 被阅读0次

微信小程序自定义组件传值问题
Flutter 页面生命周期
微信小程序生命周期
调用自定义组件中的方法
微信小程序自定义组件
小程序的自定义组件
小程序2
uni-app微信小程序开发 - 生命周期
微信小程序的组件及分包
自定义vue组件

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

接口	描述
onPageShow	页面每次显示时触发。
onPageHide	页面每次隐藏时触发一次。
onBackPress	当用户点击返回按钮时触发。

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

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

代码示例：

// Index.ets
import router from '@ohos.router';

// Page
@Entry
@Component
struct MyComponent {
  @State showChild: boolean = true;

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
  }

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

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

  build() {
    Column() {
      // this.showChild为true，创建Child子组件，执行Child aboutToAppear
      if (this.showChild) {
        Child()
      }
      // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
      Button('create or delete Child').onClick(() => {
        this.showChild = false;
      })
      // push到Page2页面，执行onPageHide
      Button('push to next page')
        .onClick(() => {
          router.pushUrl({ url: 'pages/Page2' });
        })
    }

  }
}

// 组件
@Component
struct Child {
  @State title: string = 'Hello World';
  // 组件生命周期
  aboutToDisappear() {
    console.info('[lifeCycle] Child aboutToDisappear')
  }
  // 组件生命周期
  aboutToAppear() {
    console.info('[lifeCycle] Child aboutToAppear')
  }

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