第十九讲_HarmonyOS应用页面和自定义组件生命周期

HarmonyOS应用页面和自定义组件生命周期

  • [1. 什么叫页面](#1. 什么叫页面)
  • [2. 什么叫自定义组件](#2. 什么叫自定义组件)
  • [3. 页面的生命周期](#3. 页面的生命周期)
  • [4. 自定义组件的生命周期](#4. 自定义组件的生命周期)
  • [5. 一个页面的生命周期流程](#5. 一个页面的生命周期流程)

1. 什么叫页面

页面:即HarmonyOS应用的UI页面。

  • 由一个或者多个自定义组件组成
  • @Entry装饰的自定义组件为页面的入口组件,一个页面有且仅能有一个@Entry
  • 只有被@Entry装饰的组件才可以调用页面的生命周期

2. 什么叫自定义组件

自定义组件@Component装饰的UI单元。

  • 可以组合多个系统组件实现UI的复用
  • 可以调用组件的生命周期

3. 页面的生命周期

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

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

4. 自定义组件的生命周期

  • aboutToAppear():组件即将出现时回调,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • aboutToDisappear():在自定义组件析构销毁之前执行。

5. 一个页面的生命周期流程

@Entry装饰的组件(即页面)生命周期的流程图:

typescript 复制代码
/**
 * 被@Component修饰就是一个组件
 * 被@Entry修饰的组件就是一个页面
 */
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  // 自定义组件的新实例后,在执行其build()函数之前执行
  aboutToAppear() {
    console.warn("组件被实例化了")
  }

  // 页面每次显示时触发一次,包括路由过程、应用进入前台等场景
  onPageShow() {
    console.warn("页面被显示了");
  }

  // 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景
  onPageHide() {
    console.warn("页面被隐藏了")
  }

  // 当用户点击返回按钮时触发
  onBackPress() {
    console.warn("返回")
  }

  // 自定义组件的新实例后,在执行其build()函数之前执行
  aboutToDisappear() {
    console.warn("组件被销毁了")
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
bash 复制代码
09-05 22:16:29.093 16926-23064/? W 0FEFE/JsApp: 组件被实例化了
09-05 22:16:29.094 16926-23064/? W 0FEFE/JsApp: 页面被显示了
09-05 22:16:42.125 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 页面被隐藏了
09-05 22:16:50.207 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 页面被显示了
09-05 22:16:53.945 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 返回
09-05 22:16:53.995 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 组件被销毁了
相关推荐
羑悻的小杀马特4 分钟前
探秘仓颉:当函数式编程遇见面向对象王国,当协程风暴席卷并发荒原——从基础语法到实战测试联动的多维编程奇遇记
华为·harmonyos·仓颉·仓颉征文·个人感受·标准库源码·语法剖析
艾小码23 分钟前
前端别再乱存数据了!这3种存储方案让你的应用快如闪电
前端·javascript
球球和皮皮25 分钟前
Babylon.js学习之路《添加自定义摇杆控制相机》
javascript·3d·前端框架·babylon.js
LucianaiB26 分钟前
【案例实战】基于分布式能力的跨设备任务协同应用开发
harmonyos·鸿蒙·1024程序员节·案例实战
Moment26 分钟前
面经分享——字节前端一面
前端·javascript·面试
程序猿阿伟9 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
尘觉9 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
chxii11 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够11 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
摘星编程13 小时前
【成长纪实】HarmonyOS Next学习地图:新手避坑指南与核心知识点拆解
学习·华为·harmonyos·鸿蒙开发