自定义组件

即用@Component或@ComponentV2装饰的自定义组件，生命周期流程图如下：

生命周期接口：
1、aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build函数之前执行。
2、定义组件声明式UI，必须实现。紧随 aboutToAppear后执行，完成首次渲染。
3、onDidBuild：在组件首次渲染触发的build函数执行完成之后回调该接口，后续组件重新渲染将不回调该接口。开发者可以在这个阶段实现埋点数据上报等不影响实际UI的功能。
4、aboutToDisappear：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

通过代码直观看一下生命周期：

@Entry
@ComponentV2
struct Index {
  aboutToAppear(): void {
    console.info('生命周期：aboutToAppear')
  }

  aboutToDisappear(): void {
    console.info('生命周期：aboutToDisappear')
  }

  onDidBuild(): void {
    console.info('生命周期：onDidBuild')
  }

  build() {
    Column(){
      Text('build')
    }
  }
}

日志输出结果：

02-03 23:17:36.553   3488-3488     A03d00/JSAPP                    com.test.demo         I     生命周期：aboutToAppear
02-03 23:17:36.553   3488-3488     A03d00/JSAPP                    com.test.demo         I     生命周期：onDidBuild
02-03 23:17:57.634   3488-3488     A03d00/JSAPP                    com.test.demo         I     生命周期：aboutToDisappear

自定义组件创建及渲染流程

1、自定义组件的创建：自定义组件的实例由ArkUI框架创建。

2、初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。

3、如果开发者定义了aboutToAppear，则执行build方法之前执行该方法。

4、在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在首次渲染的过程中，框架会记录状态变量和组件的映射关系，当状态变量改变时，驱动其相关的组件刷新。
5、如果定义了onDidBuild，则执行build方法之后执行该方法。

自定义组件重新渲染

当触发事件（比如点击）改变状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：

框架观察到变化，启动重新渲染。

根据框架记录的状态变量和组件的映射关系，仅刷新发生变化的状态变量所关联的组件，实现最小化更新。

自定义组件的删除

例如if组件的分支改变或ForEach循环渲染中数组的个数改变，组件将被移除：

1、在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，前端节点已经没有引用时，将被Ark虚拟机垃圾回收。

2、自定义组件和它的变量将被删除，如果组件有同步的变量（如@Link、@Prop、@StorageLink），将从同步源上取消注册。

不建议在生命周期aboutToDisappear中使用async await。如果在此生命周期中使用异步操作（如 Promise 或回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法执行完毕，这会阻止自定义组件的垃圾回收。

自定义组件嵌套使用

import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Parent {
  @State showChild: boolean = true;
  @State btnColor: string = '#FF007DFF';

  // 组件生命周期
  aboutToAppear() {
    hilog.info(0x0000, 'testTag', 'Parent aboutToAppear');
  }

  // 组件生命周期
  onDidBuild() {
    hilog.info(0x0000, 'testTag', 'Parent onDidBuild');
  }

  // 组件生命周期
  aboutToDisappear() {
    hilog.info(0x0000, 'testTag', 'Parent aboutToDisappear');
  }

  build() {
    Column() {
      // this.showChild为true，创建Child子组件，执行Child aboutToAppear和Child onDidBuild。
      if (this.showChild) {
        Child()
      }
      Button('delete Child')
        .margin(20)
        .backgroundColor(this.btnColor)
        .onClick(() => {
          // 更改this.showChild为false，删除Child子组件，执行Child aboutToDisappear。
          // 更改this.showChild为true，添加Child子组件，执行Child aboutToAppear和Child onDidBuild。
          this.showChild = !this.showChild;
        })
    }
  }
}

@Component
struct Child {
  @State title: string = 'Hello World';

  // 组件生命周期
  aboutToDisappear() {
    hilog.info(0x0000, 'testTag', 'Child aboutToDisappear');
  }

  // 组件生命周期
  onDidBuild() {
    hilog.info(0x0000, 'testTag', 'Child onDidBuild');
  }

  // 组件生命周期
  aboutToAppear() {
    hilog.info(0x0000, 'testTag', 'Child aboutToAppear');
  }

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

1、应用冷启动的初始化流程为：Parent aboutToAppear --> Parent build --> Parent onDidBuild --> Child aboutToAppear --> Child build --> Child onDidBuild。此处体现了自定义组件懒展开特性，即Parent执行完onDidBuild之后才会执行Child组件的aboutToAppear。日志输出信息如下：

Parent aboutToAppear
Parent onDidBuild
Child aboutToAppear
Child onDidBuild

点击Button按钮，更改showChild为false，删除Child组件，执行Child aboutToDisappear方法。

如果直接退出应用，则会触发以下生命周期：Parent aboutToDisappear --> Child aboutToDisappear，此处体现了自定义组件删除顺序也是从父到子。日志输出信息如下：

Parent aboutToDisappear
Child aboutToDisappear

最小化应用或者应用进入后台，当前Index页面未被销毁，所以并不会执行组件的aboutToDisappear。

如果showChild的默认值为false，则应用冷启动的初始化流程为：Parent aboutToAppear --> Parent build --> Parent onDidBuild。日志输出信息如下：

Parent aboutToAppear
Parent onDidBuild

如果showChild的默认值为false，直接退出应用，则只执行Parent aboutToDisappear方法。

如果showChild的默认值为false，此时点击Button按钮，更改showChild为true，添加Child组件，添加流程为：Child aboutToAppear --> Child build --> Child onDidBuild。日志输出信息如下：

Child aboutToAppear
Child onDidBuild

当showChild为默认值true时，该示例的生命周期流程图如下所示：