HarmonyOS 应用开发学习笔记 ets组件生命周期

HarmoryOS Ability页面的生命周期
@Component自定义组件
ets组件生命周期官放文档

本文讲解 ets组件的生命周期，在此之前大家可以先去了解Ability的生命周期，这两个生命周期有有一定的关联性

在开始之前，我们先明确自定义组件和页面的关系：

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

组件定义：@Entry 、 @Component

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

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

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

代码示例：

import { ComponentA } from './ComponentA'

@Entry
@Component
struct Index {

  @State message: string = '工欲善其事，必先利其器'
  @State message2: string = ''
  @State message3: string = '拥抱时代'
  @State message4: string = '点11击事件'
  @State message5: number = 2

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

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

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

  build() {
    Row() {
      Column() {
        //引入组件ComponentA
        ComponentA({ msg: this.message3 })

        Divider().padding(10)
        //引入组件ComponentA
        // ComponentA({ msg: this.message })
      }.padding(20)
    }
  }
}

启动后：
先调用组件的 aboutToAppear()，再调用 onPageShow() （如果被@Entry修饰）

最后：

官网文档里有一句话：
一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期
经木子测，自定义组件用@Entry修饰了不能触发（onPageShow、onPageHide、onBackPress ）回调

即：

• index.ets 组件（入口组件） 能触发 onPageShow、onPageHide、onBackPress、aboutToAppear、aboutToDisappear

• 自定义组件ComponentA 仅能触发（aboutToAppear、aboutToDisappear）