HarmonyOS（五）—— 认识页面和自定义组件生命周期

前言

在前面我们通过如何创建自定义组件一文知道了如何如何自定义组件以及自定义组件的相关注意事项，接下来我们认识一下页面和自定义组件生命周期。

自定义组件和页面的关系

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

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

生命周期

下面依次介绍页面和组件的生命周期函数。

1:页面生命周期

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

  • onPageShow：页面每次显示时触发。
onPageShow?(): void

页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。

  • onPageHide：页面每次隐藏时触发一次。
onPageHide?(): void

页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry装饰的自定义组件生效。

  • onBackPress：当用户点击返回按钮时触发。
onBackPress?(): void

当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。

onPageShow，onPageHide，onBackPress生命周期简单使用列子如下：

// xxx.ets
@Entry
@Component
struct IndexComponent {@State textColor: Color = Color.Black;onPageShow() {this.textColor = Color.Blue;console.info('IndexComponent onPageShow');}onPageHide() {this.textColor = Color.Transparent;console.info('IndexComponent onPageHide');}onBackPress() {this.textColor = Color.Red;console.info('IndexComponent onBackPress');}build() {Column() {Text('Hello World').fontColor(this.textColor).fontSize(30).margin(30)}.width('100%')}
}

2:组件生命周期

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

  • aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
aboutToAppear?(): void

aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。

注意⚠️：从API version 9开始，该接口支持在ArkTS卡片中使用。

  • aboutToDisappear：在自定义组件即将析构销毁时执行。
aboutToDisappear?(): void

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

注意⚠️：从API version 9开始，该接口支持在ArkTS卡片中使用。

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件生命周期。
在这里插入图片描述
根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。

自定义组件的创建和渲染流程

  1. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
  2. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
  3. 如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
  4. 在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：

a: 状态变量 -> UI组件（包括ForEach和if）。
b: UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。

build() {...this.observeComponentCreation(() => {Button.create();})this.observeComponentCreation(() => {Text.create();})...
}

当应用在后台启动时，此时应用进程并没有销毁，所以仅需要执行onPageShow。

自定义组件重新渲染

当事件句柄被触发（比如设置了点击事件，即触发点击事件）改变了状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：

  1. 框架观察到了变化，将启动重新渲染。
  2. 根据框架持有的两个map（自定义组件的创建和渲染流程中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。

自定义组件的删除

如果if组件的分支改变，或者ForEach循环渲染中数组的个数改变，组件将被删除：

  1. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，当前端节点已经没有引用时，将被JS虚拟机垃圾回收。
  2. 自定义组件和它的变量将被删除，如果其有同步的变量，比如@Link、@Prop、@StorageLink，将从同步源上取消注册。

不建议在生命周期aboutToDisappear内使用async await，如果在生命周期的aboutToDisappear使用异步操作（Promise或者回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。

以下示例展示了生命周期的调用时机：

// 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 aboutToAppearif (this.showChild) {Child()}// this.showChild为false，删除Child子组件，执行Child aboutToDisappearButton('create or delete Child').onClick(() => {this.showChild = false;})// push到Page2页面，执行onPageHideButton('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也同时也声明了组件的生命周期函数。

  1. 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。
  2. 点击“delete Child”，if绑定的this.showChild变成false，删除Child组件，会执行Child aboutToDisappear方法。
  3. 点击“push to next page”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。
  4. 如果调用的是router.replaceUrl，则当前Index页面被销毁，执行的生命周期流程将变为：Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到，组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。
  5. 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被销毁。
  6. 最小化应用或者应用进入后台，触发Index onPageHide。当前Index页面没有被销毁，所以并不会执行组件的aboutToDisappear。应用回到前台，执行Index onPageShow。
  7. 退出应用，执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/172115.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【案例讲解】LVGL 如何用LVGL画加载圈

【案例讲解】LVGL 如何用LVGL画加载圈

更多源码分析请访问：LVGL 源码分析大全 目录 1、概述2、实现效果图3、实现思路4、代码详解1、概述 很多场景下，在用户操作时，需要使用一个加载圈来缓解用户焦虑问题。 2、实现效果图 3、实现思路 用八个固定的圆点来表示加载圈，当使这八个圈依次隐藏和显示，这样就能做…
阅读更多...
基于helm的方式在k8s集群中部署gitlab - 部署（一）

基于helm的方式在k8s集群中部署gitlab - 部署（一）

文章目录 1. 背景说明2. 你可以学到什么？3. 前置条件4. 安装docker服务（所有节点）5. 部署k8s集群5.1 系统配置（所有节点）5.2 安装kubelet组件(所有节点)5.2.1 编写kubelet源5.2.2 安装kubelet5.2.3 启动kubelet 5.3 集…
阅读更多...
基于helm的方式在k8s集群中部署gitlab - 备份恢复（二）

基于helm的方式在k8s集群中部署gitlab - 备份恢复（二）

接上一篇 基于helm的方式在k8s集群中部署gitlab - 部署（一），本篇重点介绍在k8s集群中备份gitlab的数据，并在虚拟机上部署相同版本的gitlab，然后将备份的数据进行还原恢复 文章目录 1. 备份2. 恢复到虚拟机上的gitlab2.…
阅读更多...
【Git】git 更换远程仓库地址三种方法总结分享

【Git】git 更换远程仓库地址三种方法总结分享

因为公司更改了 gitlab 的网段地址，发现全部项目都需要重新更改远程仓库的地址了，所以做了个记录，说不定以后还会用到呢。 一、不删除远程仓库修改（最方便） # 查看远端地址 git remote -v # 查看远端仓库名 git rem…
阅读更多...
牛客网刷题笔记四 链表节点k个一组翻转

牛客网刷题笔记四 链表节点k个一组翻转

NC50 链表中的节点每k个一组翻转 题目： 思路： 这种题目比较习惯现在草稿本涂涂画画链表处理过程。整体思路是赋值新的链表，用游离指针遍历原始链表进行翻转操作，当游离个数等于k时，就将翻转后的链表接到新的链表后&am…
阅读更多...
歌曲《兄弟情深》：歌手荆涛歌曲中的真挚情感

歌曲《兄弟情深》：歌手荆涛歌曲中的真挚情感

在人生的道路上，有时我们会遇到迷茫、失落、困惑等种种情境。而在这些时刻，身边有一个真挚的兄弟，其意义是无法估量的。歌手荆涛演唱的《兄弟情深》即是对这种深厚情感的美妙歌颂。 一、迷茫时的指引 “当我迷茫时，有你帮目标重新…
阅读更多...
这是一张单纯的图片-MISC-bugku-解题步骤

这是一张单纯的图片-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息： 题目：这是一张单纯的图片 作者：harry 提示：无 解题附件： 解题思路： 图片解题三板斧winwalk、010Editor、Stegsolve，一一尝试。 解题步骤： 一、wi…
阅读更多...
emu8086汇编语言输出“Hello World！“

emu8086汇编语言输出“Hello World！“

输出Hello world 首先我们尝试用C语言来实现该功能&#xff1a; #include <stdio.h>int main() {printf("Hello World!"); // 输出“Hello World!”return 0; } 将这行代码翻译成汇编语言... ; DS 数据段定义 DATA SEGMENTZIFU DB Hello World!,$ ;字符串…
阅读更多...
2016年五一杯数学建模A题购房中的数学问题解题全过程文档及程序(采光与房款)

2016年五一杯数学建模A题购房中的数学问题解题全过程文档及程序(采光与房款)

2016年五一杯数学建模 A题 购房中的数学问题 原题再现 随着现代社会经济的快速发展&#xff0c;房地产成为国家经济发展中重要的经济增长点之一。为了充分利用楼房建设的土地面积&#xff0c;开发商经常会选择建筑高层住宅。在购买住房时&#xff0c;影响消费者选择购房的因素…
阅读更多...
深入理解数据结构：链表

深入理解数据结构：链表

文章目录 &#x1f330;导语&#x1f330;链表的定义及基本结构&#x1f330;单链表&#x1f955;单链表特点 &#x1f330;双向链表&#x1f955;双链表特点 &#x1f330;循环链表&#x1f955;循环链表特点 &#x1f330;链表的操作&#x1f346;链表的插入&#x1fad8;链头…
阅读更多...
Git 仓库越来越大？不要慌！试试这个简单方法，轻松秒瘦身

Git 仓库越来越大？不要慌！试试这个简单方法，轻松秒瘦身

开局两张图 瘦身前瘦身后 目录 开局两张图前言下载 BFG克隆代码Git 仓库瘦身清理存储库储存库 GC推送仓库 Git 瘦身验证结语开源项目 前言 在进行项目开发的过程中&#xff0c;代码仓库的体积可能会逐渐增大&#xff0c;特别是在版本控制系统中保留了大量的历史提交记录和不必…
阅读更多...
YOLOv5算法进阶改进（4）— 引入解耦合头部 | 助力提高检测准确率

YOLOv5算法进阶改进（4）— 引入解耦合头部 | 助力提高检测准确率

前言：Hello大家好，我是小哥谈。解耦头是目标检测中的一种头部设计，用于从检测网络的特征图中提取目标位置和类别信息。具体来说，解耦头部将目标检测任务分解为两个子任务：分类和回归。分类任务用于预测目标的类别，回归任务用于预测目标的位置。这种设计可以提高目标检测的…
阅读更多...
黑马程序员索引学习笔记

黑马程序员索引学习笔记

文章目录 索引的分类从索引字段特性从物理存储从数据结构组成索引的字段个数 InnoDB主键索的Btree高度为多高呢?explain执行计划最左匹配原则索引失效情况SQL提示覆盖索引、回表查询前缀索引索引设计原则 索引的分类 从索引字段特性 主键索引、唯一索引、常规索引、全文索引…
阅读更多...
卷积神经网络（CNN）车牌识别

卷积神经网络（CNN）车牌识别

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据3.数据可视化4.标签数字化 二、构建一个tf.data.Dataset1.预处理函数2.加载数据3.配置数据 三、搭建网络模型四、设置动态学习率五、编译六、训练八、保存和…
阅读更多...
6.1 Windows驱动开发：内核枚举SSDT表基址

6.1 Windows驱动开发：内核枚举SSDT表基址

SSDT表&#xff08;System Service Descriptor Table&#xff09;是Windows操作系统内核中的关键组成部分&#xff0c;负责存储系统服务调用的相关信息。具体而言&#xff0c;SSDT表包含了系统调用的函数地址以及其他与系统服务相关的信息。每个系统调用对应SSDT表中的一个表项…
阅读更多...
PWM(PulseWidthModulation)控制

PWM(PulseWidthModulation)控制

PWM&#xff08;Pulse Width Modulation&#xff09;控制就是对脉冲的宽度进行调制的技术&#xff0c;即通过对一系列脉冲的宽度进行调制&#xff0c;来等效的获得所需要的波形&#xff08;含形状和幅值&#xff09;&#xff1b;面积等效原理是PWM技术的重要基础理论&#xff1…
阅读更多...
软件工程简明教程

软件工程简明教程

软件工程简明教程 何为软件工程&#xff1f; 1968 年 NATO&#xff08;北大西洋公约组织&#xff09;提出了软件危机&#xff08;Software crisis&#xff09;一词。同年&#xff0c;为了解决软件危机问题&#xff0c;“软件工程”的概念诞生了。一门叫做软件工程的学科也就应…
阅读更多...
电源控制系统架构（PCSA）之电源控制框架概览

电源控制系统架构（PCSA）之电源控制框架概览

目录 6 电源控制框架 6.1 电源控制框架概述 6.1.1 电源控制框架低功耗接口 6.1.2 电源控制框架基础设施组件 6 电源控制框架 电源控制框架是标准基础设施组件、接口和相关方法的集合&#xff0c;可用于构建SoC电源管理所需的基础设施。 本章介绍框架的主要组件和低功耗接…
阅读更多...
vue3通过v-model实现父子组件通信

vue3通过v-model实现父子组件通信

单一值传递 父组件 <template><div ><h1>v-model实现父子组件通讯</h1><hr><child1 v-model"num"></child1><!-- 上下两个是等价的 --><child1 :modelValue"num" update:modelValue"handle&quo…
阅读更多...
聚类笔记：HDBSCAN

聚类笔记：HDBSCAN

1 算法介绍 DBSCAN/OPTICS层次聚类主要由以下几步组成 空间变换构建最小生成树构建聚类层次结构(聚类树)压缩聚类树提取簇 2 空间变换 用互达距离来表示两个样本点之间的距离 ——>密集区域的样本距离不受影响——>稀疏区域的样本点与其他样本点的距离被放大——>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023