HarmonyOS NEXT鸿蒙开发：组件的生命周期、回调函数-马育民老师

# 介绍

[官网指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-custom-components-lifecycle-V5 "官网指南")

自定义组件：由 `@Component` 装饰的UI单元，可以组合多个系统组件实现UI的复用，可以 **调用组件的 生命周期**。

### 生命周期

接口：

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

- onDidBuild：组件build()函数执行完成之后回调该接口，不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。

- aboutToDisappear：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

# 执行流程

### 创建和渲染流程

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

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

3. 如果开发者定义了 `aboutToAppear`，则执行 `aboutToAppear` 方法。

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

5. 如果开发者定义了 `onDidBuild`，则执行 `onDidBuild` 方法。

### 重新渲染流程

当改变了 **状态变量** 时，或者 `LocalStorage` / `AppStorage` 中的属性更改，并导致绑定的状态变量更改其值时：

1. 框架观察到了变化，将启动重新渲染。

2. 根据框架持有的两个 `map`（自定义组件的创建和渲染流程中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。

### 删除流程

如果 `if` 组件的分支改变，或者 `ForEach` 循环渲染中数组的个数改变，组件将被删除：

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

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

**注意：**不建议在生命周期 `aboutToDisappear` 内使用 `async`、 `await`，如果在生命周期的 `aboutToDisappear` 使用异步操作（Promise或者回调方法），自定义组件将被保留在 `Promise` 的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。

# 例子

```
// Index.ets
import { router } from '@kit.ArkUI';

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

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

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

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

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

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

// 组件生命周期
  onDidBuild() {
    console.info('[lifeCycle] Child onDidBuild');
  }

// 组件生命周期
  aboutToAppear() {
    console.info('[lifeCycle] Child aboutToAppear');
  }

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

### 执行过程

`MyComponent` 和其子组件 `Child` 分别声明了各自的组件级别生命周期函数（ `aboutToAppear` / `onDidBuild` / `aboutToDisappear` ）。

- 应用冷启动的初始化流程为：MyComponent `aboutToAppear` --> MyComponent `build` --> MyComponent `onDidBuild`--> Child `aboutToAppear` --> Child `build` --> Child `onDidBuild`

- 点击 【delete Child】 ，`if` 绑定的 `this.showChild` 变成 `false` ，删除 `Child` 组件，会执行 Child `aboutToDisappear`方法。

- 退出应用，执行  MyComponent `aboutToDisappear` --> Child `aboutToDisappear`。

原文出处：http://malaoshi.top/show_1GW1Tl0TUBL.html