`
龙儿筝
  • 浏览: 696 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

鸿蒙自定义组件生命周期

阅读更多

在开始之前,我们先明确自定义组件和页面的关系:

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

页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
  • onBackPress:当用户点击返回按钮时触发。

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • onDidBuild:组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。
  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。
img1
以下示例展示了生命周期的调用时机:

// 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
@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装饰的节点才可以使页面级别的生命周期方法生效,因此在MyComponent中声明当前Index页面的页面生命周期函数(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。
0
0
分享到:
评论

相关推荐

    【OpenHarmony】ArkTS 语法基础 ③ ( 自定义组件生命周期回调函数 - 页面生命周期回调函数 )

    【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 ) https://hanshuliang.blog.csdn.net/article/details/139424435 博客源码快照 一、ArkTS @Component ...

    鸿蒙Web组件使用示例Demo

    【鸿蒙Web组件使用示例Demo】是基于HarmonyOS操作系统的一个开发项目,它展示了如何在ArkTS API9版本中利用Stage模式来有效地构建和管理Web组件。HarmonyOS是华为推出的面向全场景的分布式操作系统,旨在提供跨平台...

    HarmonyOS鸿蒙应用开发者高级认证题库(覆盖99%考题)

    ### HarmonyOS应用开发者高级认证题库解析 #### 一、判断题解析 1. **云函数打包完成后,...- **解析**:在HarmonyOS开发中,自定义组件确实拥有自己的生命周期,这与标准UI组件类似,包括初始化、显示、隐藏等阶段。

    鸿蒙HarmonyOS应用开发者认证 题库+答案案

    本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案,涵盖了HarmonyOS应用开发的多个方面,包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...

    HarmonyOS应用开发者基础认证考试题目及答案

    以上是HarmonyOS应用开发者基础认证考试中涉及的关键知识点,涵盖数据管理、组件使用、布局设计、网络请求以及组件生命周期等方面。学习并理解这些知识点是成为合格的HarmonyOS应用开发者的基础。

    HarmonyOS应用开发者基础认证 word试题及答案

    一、 HarmonyOS 生命周期 * 每一个自定义组件都有自己的生命周期。 * 使用@Component 修饰的自定义组件都支持 onPageShow、onBackPress 和 onPageHide 生命周期函数。 二、 HarmonyOS 组件 * Video 组件可以支持...

    鸿蒙HarmonyOS应用开发者高级认证习题汇总(齐全)

    3. **自定义组件生命周期**:并非所有使用`@Component`修饰的自定义组件都支持`onPageShow`,`onBackPress`和`onPageHide`生命周期函数。这些函数通常与页面级Ability相关联,而不是组件。 4. **数据存储**:首选项...

    HarmonyOS应用开发者基础题库

    7. **自定义组件生命周期**:包括aboutToAppear、aboutToDisappear、onPageShow、onPageHide和onBackPress等函数,用于管理组件在不同阶段的行为。 8. **变量状态管理**:@State和@Link装饰器可用于管理组件内部...

    HarmonyOS应用开发者认证题目满分指南

    - UIAbility的生命周期包括Create、WindowStageCreate、Foreground、Background、WindowStageDestroy和Destroy这几个阶段,每个阶段对应特定的操作。 - UIAbility的启动模式有multiton、singleton和specified三种...

    [练习题+答案]Harmony OS应用开发者高级认证

    - **知识点3**:在HarmonyOS中,并非所有使用`@Component`修饰的自定义组件都会自动支持`onPageShow`, `onBackPress` 和 `onPageHide` 这些生命周期回调方法。这些方法主要针对的是页面级别的组件,而非所有自定义...

    HarmonyOS应用开发者高级认证 word试题及答案

    3. **生命周期管理**:自定义组件有自己的生命周期,如onPageShow、onBackPress和onPageHide等生命周期函数。 **三、服务和函数** 1. **云函数**:需要在AppGallery Connect创建触发器才能在端侧调用。 2. **HUKS...

    HarmonyOS应用开发者高级认证题库(覆盖99%考题)

    - **解析**:在HarmonyOS开发中,自定义组件确实拥有自己的生命周期,这与标准UI组件类似,包括初始化、显示、隐藏等阶段。 3. **基于端云一体化开发,开发者需要精通前端、后端不同的开发语言**(错误) - **...

    <HarmonyOS第一课>学习路径2.ArkTS开发语言介绍 试题及答案

    &lt;HarmonyOS第一课&gt;学习路径2.ArkTS开发语言介绍 习题及答案【习题】ArkTS基础知识 及格分85...下面哪些函数是自定义组件的生命周期函数?A. aboutToAppearB. aboutToDisappearC. onPageShowD. onPageHideE. onBackPress

    基于HarmonyOS 4开发的一款新闻类的鸿蒙APP源代码

    7. **生命周期管理**:了解组件的生命周期对优化性能至关重要,例如在合适的时机释放资源,防止内存泄漏。 8. **多设备适配**:HarmonyOS 的目标是跨平台运行,所以源码会包含如何设计适应不同屏幕尺寸和硬件设备的...

    HarmonyOS应用开发者基础认证考试题目及答案.pdf

    3. **组件生命周期**: - 自定义组件有自己的生命周期,这对于管理组件的状态和行为至关重要。 4. **Tabs组件**: - Tabs组件用于创建多标签页面,每个TabContent组件对应一个页面视图。它仅可包含子组件...

    HarmonyOS最新版基础认证题目(6月21日之后)

    在HarmonyOS中,自定义组件如同原生组件一样,有自己的生命周期,例如加载、初始化、显示、隐藏等状态变化。 **9. 所有使用@Component 修饰的自定义组件都支持 onPageShow, onBackPress和 onPageHide 生命周期函数...

    鸿蒙高级开发者认证题库

    自定义组件生命周期** - **错误判断:** 所有使用`@Component`修饰的自定义组件都支持`onPageShow`、`onBackPress`和`onPageHide`等生命周期方法。 - 并非所有自定义组件都支持这些生命周期方法,具体取决于组件的...

    1-HarmonyOS通讯录开发实验详细操作手册(J.pdf

    8. 页面生命周期以及页面之间跳转与传参 9. 自定义组件(同时涉及到 Canvas)以及如何调用 10. 数据存储操作,主要涉及 sqlite 数据库存储 11. 代码编程规范、设计模式 实验过程分解与实验目标对应矩阵: | 实验...

    HarmonyOS JS UI框架简介1

    - **前端框架层 (Framework)**:负责前端页面解析,提供MVVM开发模式、页面路由和自定义组件等功能。 - **引擎层 (Engine)**:包含动画解析、DOM树构建、布局计算、渲染命令构建与绘制及事件管理等功能。 - **...

Global site tag (gtag.js) - Google Analytics