美文网首页
鸿蒙(2)UIAbility、页面及组件的生命周期

鸿蒙(2)UIAbility、页面及组件的生命周期

作者: cain07 | 来源:发表于2024-11-15 23:00 被阅读0次

一、背景

主要梳理下鸿蒙系统开发中常用的生命周期

二、UIAbility组件

UIAbility组件是一种包含UI界面的应用组件,主要用于和用户交互。

UIAbility组件是系统调度的基本单元,为应用提供绘制界面的窗口;一个UIAbility组件中可以通过多个页面来实现一个功能模块。每一个UIAbility组件实例,都对应于一个最近任务列表中的任务。

2.1、UIAbility组件生命周期

当用户打开、切换和返回到对应应用时,应用中的UIAbility实例会在其生命周期的不同状态之间转换。

UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态,如下图所示。

image.png

2.2、生命周期状态说明

image.png

2.2.1、Create状态

在应用加载过程中,UIAbility实例创建完成时触发,系统会调用onCreate()回调。可以在该回调中进行页面初始化操作,例如变量定义资源加载等,用于后续的UI界面展示。

2.2.2、WindowStageCreate和WindowStageDestroy状态

UIAbility实例创建完成之后,在进入Foreground之前,系统会创建一个WindowStage。WindowStage创建完成后会进入onWindowStageCreate()回调,可以在该回调中设置UI界面加载、设置WindowStage的事件订阅。


image.png

2.2.3、Foreground和Background状态
Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发,对应于onForeground()回调和onBackground()回调。

onForeground()回调,在UIAbility的UI界面可见之前,如UIAbility切换至前台时触发。可以在onForeground()回调中申请系统需要的资源,或者重新申请在onBackground()中释放的资源。

onBackground()回调,在UIAbility的UI界面完全不可见之后,如UIAbility切换至后台时候触发。可以在onBackground()回调中释放UI界面不可见时无用的资源,或者在此回调中执行较为耗时的操作,例如状态保存等。

2.2.4、Destroy状态
Destroy状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。

三、页面和自定义组件生命周期
3.1、先明确自定义组件和页面的关系:
①自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。

②页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

3.2、页面生命周期:
onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。

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

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

3.3、组件生命周期:
①aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。

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

image.png
以下示例展示了生命周期的调用时机:示例来自于官网文档中心
// 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' });
        })
    }
 
  }
}
 
@Component
struct Child {
  @State title: string = 'Hello World';
  // 组件生命周期
  aboutToDisappear() {
    console.info('[lifeCycle] Child aboutToDisappear')
  }
  // 组件生命周期
  aboutToAppear() {
    console.info('[lifeCycle] Child aboutToAppear')
  }
 
  build() {
    Text(this.title).fontSize(50).onClick(() => {
      this.title = 'Hello ArkUI';
    })
  }
}

以上示例中,Index页面包含两个自定义组件,一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;一个是Child,是MyComponent的子组件。只有@Entry装饰的节点才可以使页面级别的生命周期方法生效,所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数。
应用冷启动的初始化流程为:MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> 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。

相关文章

  • 微信小程序生命周期

    1.小程序的生命周期 2.页面的生命周期 3.组件的生命周期 4.组件所在页面的生命周期

  • Flutter 页面生命周期

    Flutter 页面生命周期就是 Flutter 页面组件 Widget 的生命周期。 Flutter 有两种组件...

  • ionic3关于页面返回时刷新segment中的子组件数据的方法

    思路: 1、ionic3中已知存在页面的生命周期函数,也可以找到ionic3中组件的相关生命周期函数。2、父子组件...

  • 微信小程序生命周期

    下面从三个方面来介绍小程序的生命周期:(1)应用生命周期(2)页面生命周期(3)应用及页面生命周期的触发顺序 1....

  • 微信小程序:生命周期

    下面从三个方面来介绍小程序的生命周期:(1)应用生命周期(2)页面生命周期(3)应用及页面生命周期的触发顺序 1....

  • 小程序组件

    1.组件定义 2.实例(this)的属性和方法 3.生命周期(其实是view Thread) 小程序页面生命周期(...

  • 生命周期

    生命周期 - 概述 目标任务: 能够说出组件生命周期一共几个阶段 组件的生命周期是指组件从被创建到挂载到页面中运行...

  • react 项目总结

    1、 react生命周期 2、组件化 把一个页面拆分成几小快 然后所有代码在父组件里面执行 3、公共组件 Com...

  • 快应用入门学习记录-01

    0、项目结构 0.1、manifest.json文件详解 1、生命周期 2、数据渲染 3、页面切换 通过组件 a ...

  • 问题记录

    1、vue生命周期: 2、返回页面保留原页面数据的方法 3、父子组件传值 4、用过哪些vue框架 5、用过哪些vu...

网友评论

      本文标题:鸿蒙(2)UIAbility、页面及组件的生命周期

      本文链接:https://www.haomeiwen.com/subject/diiejjtx.html