#jitoa #OpemHarmony应用开发入门——页面和组件的生命周期

lywenjoy

发布于 2023-8-8 09:21

浏览

0收藏

本博客由金陵科技学院-开放原子开源社-芮嘉忆编写

自定义组件和页面的关系：

自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
页面生命周期： 即被@Entry装饰的组件生命周期，提供以下生命周期接口：
onPageShow：页面每次显示时触发。
onPageHide：页面每次隐藏时触发一次。
onBackPress：当用户点击返回按钮时触发。
组件生命周期： 即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
aboutToDisappear：在自定义组件即将析构销毁时执行。
被@Entry装饰的组件（首页）生命周期如图所示
#jitoa #OpemHarmony应用开发入门——页面和组件的生命周期-鸿蒙开发者社区

接下来看代码加深理解

 // Index.ets
import router from '@ohos.router';

@Entry
@Component
struct MyComponent {
  @State showChild: boolean = true;
    // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
    // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }

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

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

  }
}
// this.showChild为false，删除Child子组件，执行Child aboutToDisappear
      Button('delete Child').onClick(() => {
        this.showChild = false;
      })
      // push到Page2页面，执行onPageHide
      Button('push to next page')
        .onClick(() => {
          router.pushUrl({ url: 'pages/Page2' });
        })
    }

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

以上示例创建了MyComponent和Child两个自定义组件，其中MyComponent组件使用@Entry装饰器（装饰的组件将作为页面的入口，页面加载时将被渲染显示）
标记页面的生命周期方法
#jitoa #OpemHarmony应用开发入门——页面和组件的生命周期-鸿蒙开发者社区
标记组件的生命周期方法

例如之前的天气预报，为了让页面出现之前可以自动初始化数据，就可以使用生命周期接口