学习笔记（四）：页面和自定义组件生命周期

页面和组件的定义：

• 自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用，可以调用组件的生命周期。
• 页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

 

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

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

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

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

生命周期方法调用示例：

// 自定义文本组件
// 传入一个字符串，点击组件 字符串发生变化
@Component
export struct mText {
  @State message: string = 'Hello World'
  // 组件生命周期
  aboutToDisappear() {
    console.info('自定义组件生命周期方法 aboutToDisappear')
  }
  // 组件生命周期
  aboutToAppear() {
    console.info('自定义组件生命周期方法 aboutToAppear')
  }
  build() {
    Row() {
      Text(this.message)
        .fontSize(20)
        .fontColor(Color.Red)
        .onClick(()=>{
          this.message = "点击了一下"
        })
    }
  }
}


页面
import { mText } from './component/mText'
@Entry
@Component
struct Index {
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('页面生命周期 onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('页面生命周期 onPageHide');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('页面生命周期 onBackPress');
  }
  // 组件生命周期
  aboutToAppear() {
    console.info('页面-组件生命周期 aboutToAppear');
  }
  // 组件生命周期
  aboutToDisappear() {
    console.info('页面-组件生命周期 aboutToDisappear');
  }
  build() {
    Row() {
      Column() {
        mText({message: '第一个自定义组件' });
        Divider()
        mText({message: '第二个自定义组件'})
      }
      .width('100%')
    }
    .height('100%')
  }
}

 

app Log: 页面-组件生命周期 aboutToAppear
app Log: 自定义组件生命周期方法 aboutToAppear
app Log: 自定义组件生命周期方法 aboutToAppear
app Log: 页面生命周期 onPageShow