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

# 介绍

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

页面：即应用的UI页面。可以由 一个 或者 多个 自定义组件组成

`@Entry` 装饰的自定义组件为 **页面** 的 **入口组件**，即页面的根节点，**一个页面 有 且 仅能有一个** `@Entry` 。

只有被 `@Entry` 装饰的组件才可以调用 **页面的生命周期**

## 页面的生命周期

接口：

- onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。

- onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。

- onBackPress：当用户点击返回按钮时触发。

## 流程

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

[![](https://www.malaoshi.top//upload/0/0/1GW1TVCeAAY.png)](https://www.malaoshi.top//upload/0/0/1GW1TVCeAAY.png)

# 例子

### Index.ets

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

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

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

// 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
    this.btnColor ="#FFEE0606";
    return true // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
  }

// 组件生命周期
  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;
      })
      // push到page页面，执行onPageHide
      Button('push to next page')
        .onClick(() => {
          router.pushUrl({ url: 'pages/page' });
        })
    }
  }
}

@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';
      })
  }
}
```

### page.ets

```
// page.ets
@Entry
@Component
struct page {
  @State textColor: Color = Color.Black;
  @State num: number = 0;

onPageShow() {
    this.num = 5;
  }

onPageHide() {
    console.log("page onPageHide");
  }

onBackPress() { // 不设置返回值按照false处理
    this.textColor = Color.Grey;
    this.num = 0;
  }

aboutToAppear() {
    this.textColor = Color.Blue;
  }

build() {
    Column() {
      Text(`num 的值为：${this.num}`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.textColor)
        .margin(20)
        .onClick(() => {
          this.num += 5;
        })
    }
    .width('100%')
  }
}
```

### 执行流程

以上示例中，`Index` 页面包含两个自定义组件：

- 被 `@Entry` 装饰的MyComponent，也是页面的入口组件，即页面的根节点；

- 另一个是 `Child`，是MyComponent的子组件。

只有 `@Entry` 装饰的组件才会执行页面级别的生命周期方法：

- onPageShow
- onPageHide
- onBackPress

MyComponent和其子组件 `Child` 分别执行各自的组件级别生命周期函数：

- aboutToAppear
- onDidBuild
- aboutToDisappear

### 不同情况执行的流程

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

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

- 点击“push to next page”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。

- 如果调用的是router.replaceUrl，则当前Index页面被销毁，执行的生命周期流程将变为：Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到，组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。

- 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被销毁。

- 最小化应用或者应用进入后台，触发Index onPageHide。当前Index页面没有被销毁，所以并不会执行组件的aboutToDisappear。应用回到前台，执行Index onPageShow。

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

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