ArkTS - 组件生命周期

一、先说下自定义组件

在arkTs中,自定义组件分为两种(我的总结):

一种是:根组件,就是被装饰器@Entry装饰的入口组件,这也是自定义组件(父组件)。

另一种是:没有被@Entry装饰的自定义组件,只有@Component装饰器(子组件)。

// 根组件(父组件)
@Entry
@Component
struct FatherComponent {}// 子组件
@Component
struct SonComponent {}

注:
(1)我把根组件称之为父组件,没有被@Entry装饰的组件称之为子组件,这样好理解一些。
(2)子组件必须被父组件调用,才能在页面上展示出来,它自己无法展示。页面由一个父组件和无数个子组件、系统组件构成。

二、生命周期

1、在页面(父组件被@Entry装饰过)中,生命周期如下(下边解释来自鸿蒙官方文档):

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

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

onBackPress:当用户点击返回按钮时触发,仅@Entry装饰的自定义组件生效(具体这个周期函数不太明白,这个返回按钮是系统自带的还是???)

aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
这块我解释下:前三个好理解,这个aboutToAppear周期函数,可以形象的比喻人刚出生,但是身体各个方面还没开始发育,也就是build()之前;build()构建的过程,相当于长身体的时候;build()构建完成,相当于人长大了。

aboutToDisappear:在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。
这个可以理解为:人快不行了,即将要over了。不能在其函数里边改变状态变量可以理解为:人都快over,就别想着今天股票行情怎么样了,是不是该追涨?留给给子孙得了。

2、自定义子组件(没有被@Entry装饰过)只有两个生命周期:

aboutToAppear和aboutToDisappear

三、生命周期执行顺序

下图展示的是被@Entry装饰的组件(首页)生命周期(来自官方图片):

上图是一个页面从构建展示再到销毁 全部的生命周期顺序。aboutToAppear执行时,页面组件的实列才被创建出来,build就是开始构建页面实例中的各个组件,onPageShow是构建完成页面展示的时候执行。页面消失时,先执行onPageHide然后在进行组件销毁执行aboutToDisappear。

具体细节查看官网吧。

这里说下,如果父组件中有子组件,执行顺序,可以通过下边示例看出来:

// Index.ets
// 父组件
@Entry
@Component
struct FatherComponent {@State isShow: boolean = true// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('页面的 onPageShow 执行了···');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('页面的 onPageHide 执行了···');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('页面的 onBackPress 执行了···');}// 组件生命周期aboutToAppear() {console.info('父组件的 aboutToAppear 执行了···');}// 组件生命周期aboutToDisappear() {console.info('父组件的 aboutToDisappear 执行了···');}build() {Column() {if(this.isShow)ChildComponent()Button("点击显示/隐藏子组件").onClick(e=> {this.isShow = !this.isShow}).padding(15).fontSize(25)}}
}
// 子组件
@Component
struct ChildComponent {@State title: string = 'Hello World';// 组件生命周期aboutToDisappear() {console.info('子组件的 aboutToDisappear 执行了···')}// 组件生命周期aboutToAppear() {console.info('子组件的 Child aboutToAppear 执行了···')}build() {Text('我是子组件···').fontWeight(FontWeight.Bold).fontSize(30)}
}

结果如下:

当点击按钮隐藏子组件时:

点击按钮显示子组件时:

补充:

点击跳转页面时,执行如下:

只执行了onPageHide,没有执行aboutToDisappear,这说明Index页面没有被销毁。官方文档:
Index页面被隐藏,并没有销毁,所以只调用onPageHide。跳转到新页面后,执行初始化新页面的生命周期的流程。

从新页面再返回到Index页面,执行如下:

总结:
(1)通过router.pushUrl()跳转页面 会执行aboutToAppear、onPageShow,这里着重解释下,如果A页面跳转到B页面,使用的router.pushUrl()做跳转,当B页面返回到A页面时,A页面会执行aboutToAppear、onPageShow周期函数。

由此可以得出调用后台服务接口应该可以在onPageShow中进行(这块还没验证,等后期做项目再来验证)。

(2)最小化应用、或者应用进入后台,会触发 onPageHide,不会触发aboutToDisappear,说明页面不会被销毁(未测试,文档上说的)

(3)当应用回到前台,执行onPageShow(未测试,文档上说的)

(4)退出应用,执行:onPageHide -> 父组件的aboutToDisappear -> 子组件的 aboutToDisappear(未测试,文档上说的)
 

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

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

相关文章

分布式存储考点梳理 + 高频面试题

欢迎来到分布式存储模环节,本文我将和你一起梳理面试中分布式系统的数据库的高频考点,做到温故知新。 面试中如何考察分布式存储 广义的分布式存储根据不同的应用领域,划分为以下的类别: 分布式协同系统 分布式文件系统 分布式…

Xline command 去重机制(一)—— RIFL 介绍

为什么要对 command 去重? 在一个接收外部 command 的系统中,通常一个 command 至少要执行一次,我们称其为 at-least-once semantics。如果一个 command 执行失败,系统内部经常会实现一套重试结构来尝试恢复这个问题,…

HTML 基础

文章目录 01-标签语法标签结构 03-HTML骨架04-标签的关系05-注释06-标题标签07-段落标签08-换行和水平线09-文本格式化标签10-图像标签图像属性 11-路径相对路径绝对路径 12-超链接标签13-音频14-视频 01-标签语法 HTML 超文本标记语言——HyperText Markup Language。 超文本…

【分布式配置中心】聊聊Apollo的安装与具体配置变更的原理

【管理设计篇】聊聊分布式配置中心 之前就写过一篇文章,介绍配置中心,但是也只是简单描述了下配置中心的设计点。本篇从apollo的安装到部署架构到核心原理进一步解读,大概看了下apollo的原理,感觉没有必要深究,所以就…

2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项样题卷③

2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项(高职组) 样题(第3套) 目录 2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项(高职组) 样题(第3套) 模块…

【北亚数据恢复】mysql表被truncate,表数据被delete的数据恢复案例

云服务器数据恢复环境: 华为ECS云服务器,linux操作系统,mysql数据库(innodb引擎)。作为网站服务器使用。 云服务器故障: 在执行mysql数据库版本更新测试时,误将本应该在测试库上执行的sql脚本执…

亚马逊云科技Amazon Q,一款基于生成式人工智能的新型助手

近日,亚马逊云科技宣布推出Amazon Q,这是一款基于生成式人工智能(AI)的新型助手,专为辅助工作而设计,可以根据您的业务量身定制。通过连接到公司的信息存储库、代码、数据和企业系统,可以使用Am…

个人游戏启动器 | 游戏数据库 playnite 折腾记录

环境:Windows 11 问题:使用平板串联PC游戏后,需要一个本地的PC启动器 解决办法:使用playnite搭配插件 背景:我是个单机游戏爱好者,因为某些原因,需要串流游玩,需要一个方便手柄操作的…

arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed)

一、状态管理 1.在声明式UI中,是以状态驱动视图更新: ①状态(State):指驱动视图更新的数据(被装饰器标记的变量) ②视图(View):基于UI描述渲染得到用户界面 注意: ①…

【零基础入门VUE】VueJS - 模板

✍面向读者:所有人 ✍所属专栏:零基础入门VUE专栏https://blog.csdn.net/arthas777/category_12537076.html 我们在前面的章节中学习了如何在屏幕上以文本内容的形式输出。在本章中,我们将学习如何在屏幕上以 HTML 模板的形式获取输出。 为了…

什么是AI PC,又有哪些产品

最近一段时间,AI PC成为一个流行词。Intel在发布Core Ultra处理器的时候,直接使用了AI PC这个词语,而各大厂商发布相应的笔记本产品时,也使用了AI Ready的宣传词。而在Intel之前,AMD在发布自己的新一代APU的时候&#…

Linux中安装了openjdk后jps command not found

一、问题场景 在Linux中用yum安装了openjdk-17,也在.bashrc中配置了环境变量JAVA_HOME以及bin目录的PATH。 但是在运行jps命令时依然报错找不到命令 二、原因分析 进入到$JAVA_HOME/bin目录查看,发现只有寥寥几个命令,压根没有jps命令&…

《现代操作系统》第十二章习题答案

计算机硬件的改进主要归功于更小的晶体管。一些限制因素包括:(a) 光的波动性可能限制传统光刻技术制造集成电路的能力,(b) 固体中个别原子的迁移性可能导致非常薄的半导体、绝缘体和导体层的性能退化,(c) 背景辐射活性可能破坏分子键或影响非…

ARCGIS PRO SDK GeometryEngine处理独立几何图形

1、面积类:pol为Polygon 1).Area:获取几何图形的面积。这是使用二维笛卡尔数学来计算面积的平面测量 double d GeometryEngine.Instance.Area(pol) 2).GeodesicArea:获取几何图形的椭球面积 …

【Redis-08】Redis主从复制的实现原理

在Redis中,可以通过slaveof命令或者设置slaveof选项实现两台Redis服务器的主从复制,比如我们有两个Redis机器,地址分别是 127.0.0.1:6379 和 127.0.0.1:6380,现在我们在前者上面执行: 127.0.0.1:6379 > SLAVEOF 12…

图片预览 element-plus 带页码

vue3、element-plus项目中&#xff0c;点击预览图片&#xff0c;并显示页码效果如图 安装 | Element Plus <div class"image__preview"><el-imagestyle"width: 100px; height: 100px":src"imgListArr[0]":zoom-rate"1.2":max…

菜鸟学习vue3笔记-vue hooks初体验

import { ref } from "vue"; export default function () {let a1 ref(1);let a2 ref(5);let c ref(0);function add() {a1.value;a2.value;}return {add,a1,a2,c,}; }<template><div><p>第一个数字{{ a1 }}</p><p>第二个数字{{ a2…

公共用例库计划--个人版(一)

1、公共用例库计划 1.1、目标 在公司测试管理体系的演变过程中&#xff0c;从禅道过渡到devops再到云效平台&#xff0c;我们已经实现了对bug和用例的有效集中管理。然而&#xff0c;在实际操作中发现&#xff0c;尽管用例管理得到了初步整合&#xff0c;但在面对不同系统和测…

Python高级并发编程的实例详解

更多Python学习内容&#xff1a;ipengtao.com Python中的高效并发编程&#xff0c;有几个重要的概念和工具可以帮助大家充分利用多核处理器和提高程序性能。本文将介绍一些关键的概念和示例代码&#xff0c;以帮助大家更好地理解Python中的高效并发编程。 多线程 vs. 多进程 在…

计算机网络【HTTP 面试题】

HTTP的请求报文结构和响应报文结构 HTTP请求报文主要由请求行、请求头、空行、请求正文&#xff08;Get请求没有请求正文&#xff09;4部分组成。 1、请求行 由三部分组成&#xff0c;分别为&#xff1a;请求方法、URL以及协议版本&#xff0c;之间由空格分隔&#xff1b;请…