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.rhkb.cn/news/204884.html

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

相关文章

【网络安全】-安全常见术语介绍

【网络安全】-安全常见术语介绍

文章目录 介绍1. 防火墙（Firewall）定义通俗解释 2. 恶意软件（Malware）定义通俗解释 3. 加密（Encryption）定义通俗解释 4. 多因素认证（Multi-Factor Authentication，MFA）定…
阅读更多...
Git控制指令

Git控制指令

git status查看当前本地分支的修改状态 git diff 文件路径 查看具体文件的修改内容 git log打印用户信息 git remote -v查看远程地址 git checkout -- *还原被删除的文件 git rm -r --force .删除本地所有文件 git commit -m "Remove all files from repositor…
阅读更多...
OpenCV | 傅里叶变换——低通滤波器与高通滤波器

OpenCV | 傅里叶变换——低通滤波器与高通滤波器

import cv2 #opencv 读取的格式是BGR import numpy as np import matplotlib.pyplot as plt #Matplotlib是RGB %matplotlib inline def cv_show(img,name):cv2.imshow(name,img)cv2.waitKey()cv2.destroyAllWindows() 傅里叶变换 傅里叶变换的作用 高频：变化剧烈…
阅读更多...
leetcode:2133. 检查是否每一行每一列都包含全部整数（python3解法）

leetcode:2133. 检查是否每一行每一列都包含全部整数（python3解法）

难度：简单 对一个大小为 n x n 的矩阵而言，如果其每一行和每一列都包含从 1 到 n 的 全部 整数（含 1 和 n），则认为该矩阵是一个 有效 矩阵。 给你一个大小为 n x n 的整数矩阵 matrix ，请你判断矩阵是否为一…
阅读更多...
一篇总结 Linux 系统启动的几个汇编指令

一篇总结 Linux 系统启动的几个汇编指令

学习 Linux 系统启动流程，必须熟悉几个汇编指令，总结给大家。 这里不是最全的，只列出一些最常用的汇编指令。 一．数据处理指令 1.数据传送指令 【MOV指令】 把一个寄存器的值(立即数)赋给另一个寄存器，或者将一个…
阅读更多...
Linux下配置邮箱客户端MUTT，整合msmtp + procmail + fetchmail

Linux下配置邮箱客户端MUTT，整合msmtp + procmail + fetchmail

一、背景 在向 Linux kernel 社区提交patch补丁步骤总结（已验证成功）_kernel补丁-CSDN博客文章中提到如何向kernel社区以及其他类似如qemu、libvirt社区提交patch的详细步骤，但还有一点不足的是通过git send-email这种方法基本是只能发送patc…
阅读更多...
C# Socket通信从入门到精通（12）——多个同步UDP客户端C#代码实现

C# Socket通信从入门到精通（12）——多个同步UDP客户端C#代码实现

前言： 我们在开发Udp客户端程序的时候，有时候在同一个软件上我们要连接多个服务器，这时候我们开发的一个客户端就不够使用了，这时候就需要我们开发出来的软件要支持连接多个服务器，最好是数量没有限制，这样我们就能应对任意数量的服务器连接，由于我们开发的Udp客户端程…
阅读更多...
【深度学习】参数优化和训练技巧

【深度学习】参数优化和训练技巧

寻找合适的学习率(learning rate) 学习率是一个非常非常重要的超参数，这个参数呢，面对不同规模、不同batch-size、不同优化方式、不同数据集，其最合适的值都是不确定的，我们无法光凭经验来准确地确定lr的值，我们唯一可…
阅读更多...
【力扣】189. 轮转数组

【力扣】189. 轮转数组

【力扣】189. 轮转数组 文章目录 【力扣】189. 轮转数组1. 题目介绍2. 解法2.1 方法一：不太正规，但是简单2.2 方法二：使用额外的数组2.3 方法三：环状替换2.4 方法四：数组翻转 3. Danger参考 1. 题目介绍 给定一个整数…
阅读更多...
github新建项目

github新建项目

参考链接：Github上建立新项目超详细方法过程 在这里新建一个repositories 接下来就选择相关的信息： 然后create a new就行了 接下来需要创建文件：（同时通过upload上传文件） 每次最多上传100个文件，然后保…
阅读更多...
PWM 正玄波形 通过C语言生成

PWM 正玄波形 通过C语言生成

#include <stdio.h> #include <math.h> #include <stdint.h>#define SAMPLE_POINT_NUM (200) /* 需要生成的点的个数 */ #define SINE_MAX (255) /* sin 函数幅值 */ #define PI (3.14…
阅读更多...
数据结构之二叉树与堆以及力扣刷题函数扩展

数据结构之二叉树与堆以及力扣刷题函数扩展

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力 目录 1.前言 2.树 2.1概念 2.2树的相关概念 3.…
阅读更多...
orvibo旗下的VS30ZW网关分析之二：版本回退方法

orvibo旗下的VS30ZW网关分析之二：版本回退方法

概述 上接第一篇： orvibo旗下的VS30ZW网关分析之一-CSDN博客 此产品VS30ZW支持openwrt的页面，可以版本回退进行刷机。 openwrt固件下载： 固件名称：openwrt-VS30ZW-mt7628.bin 链接地址：https://download.csdn.net/download/leekwen/88579427 版本回退方法： 1、同…
阅读更多...
Jupyter Markdown 插入图片

Jupyter Markdown 插入图片

首先截图 注意 这一步是关键的&#xff01;&#xff01; 它需要使用电脑自带的截图&#xff0c;用qq啊vx啊美图秀秀那些都不行哦。 截图之后复制&#xff1a; 然后快捷键粘贴到jupyter里面&#xff0c;它会生成一段代码&#xff08;没有代码就是说截图形式不对&#xff09;&a…
阅读更多...
Intellij idea 内存不够用了，怎么处理？

Intellij idea 内存不够用了，怎么处理？

目录 如何判断内存不够用了 下面演示一下如何开启内存指示器&#xff08;Memory Indicator&#xff09; 解决方案 第一种&#xff1a;双击"内存指示器(Mempory Indicator)" 第二种&#xff1a;增大Intellij Idea 最大可使用内存 如何判断内存不够用了 运行项目后…
阅读更多...
Vue3-Pinia

Vue3-Pinia

Pinia是什么 Pinia是Vue的最新状态管理工具&#xff0c;是Vuex的替代品 比Vuex更大的优势在于&#xff1a; 1.提供更加简单的API&#xff08;去掉了mutation&#xff09; 2.提供符合&#xff0c;组合式风格的API&#xff08;和Vue3新语法统一&#xff09; 3.去掉了modules…
阅读更多...
【linux】信号——信号产生

【linux】信号——信号产生

信号产生 1.预备知识2.信号产生2.1通过键盘发送信号2.2系统调用接口向进程发送信号2.3硬件异常产生信号2.4软件条件2.5总结 自我名言&#xff1a;只有努力&#xff0c;才能追逐梦想&#xff0c;只有努力&#xff0c;才不会欺骗自己。 喜欢的点赞&#xff0c;收藏&#xff0c;关…
阅读更多...
SpringBoot整合阿里云OSS、天翼云OSS、MinIO对象存储

SpringBoot整合阿里云OSS、天翼云OSS、MinIO对象存储

大家好&#xff01;我是sum墨&#xff0c;一个一线的底层码农&#xff0c;平时喜欢研究和思考一些技术相关的问题并整理成文&#xff0c;限于本人水平&#xff0c;如果文章和代码有表述不当之处&#xff0c;还请不吝赐教。 以下是正文&#xff01; 对象存储是什么&#xff1f…
阅读更多...
LeetCode.24两两交换链表中的节点

LeetCode.24两两交换链表中的节点

LeetCode.24两两交换链表中的节点 1.问题描述2.解题思路3.代码 1.问题描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示…
阅读更多...
HbuilderX 项目打包文件过大问题优化

HbuilderX 项目打包文件过大问题优化

文章目录 HbuilderX 项目打包文件过大问题优化主要操作收效甚微&#xff0c;但又有那么点用的方法使用 gulp 压缩&#xff08;最后一步&#xff09;使用与配置 网上找的 gulp 优化压缩配置还未尝试可能有用的方法 尝试过程中看到的一些优质文章 HbuilderX 项目打包文件过大问题…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023