ArkUI中自定义组件的生命周期

文章概叙

本文主要是介绍下在作为page以及component的时候的生命周期,以及调用API等应该在哪个生命周期使用。

书接上回

之前的博客已经结束了对底部栏的操作,现在开始需要关注到具体内容的对接了。

而开发的第一步,我们对页面的生命周期必须要有很深入的了解,因为有开发经验的同学们都知道,做前端开发的时候,我们获取数据API的接口,都是在页面创建完成时调用,而在页面即将被销毁的时候,我们需要去关闭定时器、数据监听等操作。所以我们必须知道在哪个阶段,我们应该做什么。这些可都是面试的知识点来的。

综上述,本篇博客最主要的内容是讲下生命周期,以及在开发的时候,我们调用API,初始化一些数据的操作应该在哪些生命周期中进行。

页面与自定义组件的区别

自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。

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

像是我们的Mine以及Found组件,由于想要做到不使用tab的时候,也可以正常的访问,所以我们在其中加入了@Entry的修饰符,使其属于页面。

而文章中为什么要区分是否为页面组件,官网上也给出了具体原因,是因为页面组件以及自定义组件各有一套生命周期。
页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow

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

  • onPageHide

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

  • onBackPress

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

即当页面被切换显示的时候,各监听一次,当用户点击了返回按钮的时候,也会触发一次事件。
所以我们可以这么地去理解:

当onPageShow触发,既显示页面的时候,我们可以去拉数据显示出来

当onPageHide触发,即隐藏页面的时候,我们可以停止当前的一些操作,比如计时之类的。

当onBackPress触发,即用户想要退出当前页面的时候,我们就可以询问用户是否离开页面,以便做保存的操作。

而在@component修饰的组件中,还有一下两种方法

  • aboutToAppear

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

  • aboutToDisappear

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

也就是说,对于一些内部组件来说,并没有刚刚@Entry修饰器的返回、显示、隐藏之类的,所以我们在显示组件的时候,就只有以下两个生命周期:

当组件已经被实例化,但是还没显示在页面上的时候。aboutToAppear会被调用。

当组件即将被销毁的时候,aboutToDisappear会被调用。

而@Entry修饰的页面,则会含有上述的五个生命周期,

即下面的图
在这里插入图片描述

开始代码

在对生命周期有了基础准备工作之后,我们接下来只需要实验一些其中的生命周期,看是否符合我们的想法。

就拿我们的Mine页面做一次测试,测试代码如下,将五个都添加到了mine.ets中,接着从tab页面访问进入.

@Entry
@Component
export struct Mine {@State message: string = '这个是mine页面'onPageShow() {console.log("当前调用了pageShow方法")}onPageHide(){console.log("当前调用了pageHide方法")}onBackPress(){console.log("当前调用了onBackPress方法");}aboutToAppear(){console.log("当前调用了aboutToAppear方法");}aboutToDisappear(){console.log("当前调用了aboutToDisappear方法")}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

此时,页面还没渲染完成,就已经调用了aboutToAppear方法。
在这里插入图片描述

但是点击了上面的"我的"之后,并没有如期的显示出“onPageShow”被调用的字样,可见当前作为一个页面中的组件展示出来的时候,并没有拥有页面的生命周期,而不是简单的页面中添加了一个@Entry的时候,就无论何时何地都是一个页面了

在这里插入图片描述

接下来,我们需要校验下作为页面的时候,是否拥有上述的五个生命周期。

因此,我们需要直接在编译器中直接在mine.ets页面点击保存(最主要是当前窗口在mine.ets页面),点击previewer的刷新按钮,这时候我们的mine.ets就履行了他的@Entry义务,作为一个页面进行渲染。
在这里插入图片描述

此时,页面就直接显示了这么两个事件。

且多次点击返回按钮,日志中也出现了返回的事情日志

在这里插入图片描述

因此,我们可以确定,当我们要初始化一些数据,比如调用Api的时候,我们可以在"aboutToAppear"中去做处理。

当我们要清理定时器的时候,可以在”aboutToDisappear“中处理

毕竟上述两者,都“只会执行一次”。

在这里插入图片描述

主要介绍前端开发的博客,期待各位大佬们扫码关注

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

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

相关文章

探索抖音详情API:塑造未来的媒体交互

一、引言 随着数字媒体的迅猛发展,抖音作为全球领先的短视频平台,其API接口为开发者提供了无尽的创新机会。了解抖音详情API的请求格式与参数,是每位有远见的开发者和媒体策划者的必修课。本文将深入剖析API的内在逻辑与潜力,为您…

Windows 产品历史

Windows 1.0~3.0概述 Windows 3.1及以前版本均为16位系统,因而不能充分利用硬件迅速发展的强大功能。同时,它们只能在MS-DOS上运行,必须与MS-DOS共同管理系统资源,故它们还不是独立的、完整的操作系统。1995年推出的Windows 95已摆脱MS-DOS的…

Vue懒加载深度解析:提升性能、优化用户体验的完整指南

文章目录 🌳引言🌳Vue懒加载基础🌲什么是懒加载?🌲组件级懒加载🌲图片懒加载 🌳懒加载的原理与优势🌲组件懒加载原理🌲图片懒加载原理🌲懒加载的优势 &#x…

最后一次纪念在泰山OFFICE的日子,明年开源量子OFFICE

今天去泰山在无锡的办公地点,给门卫送了一点零食表示感谢。送了之后,我也没进去怀旧,然后就去附近的南山𦹐礼佛求福。 2021年的最后一天,公司举办了迎新活动。看了恍如隔世。我怀念泰山OFFICE,是因为在这里…

上海周边公路骑行路线分享,维乐带你抓住秋天的小尾巴

路线一:松江郊里骑行      在魔都上海,藏着一条自然风景适宜,能眺望黄浦江的美丽骑行路线。导航到华长路杨家角就能到达起点,一路向西,这里路况非常好,只有一条小道,没有汽车的障碍&#xf…

25、WEB攻防——通用漏洞SQL读写注入MYSQLMSSQLPostgreSQL

文章目录 Mysql-root高权限读写注入PostgreSQL——dba高权限读写注入Mssql-sa高权限读写注入 Access无高权限注入点——只能猜解,而且是暴力猜解; MYSQL,PostgreSQL,MSSQL(SQL server)高权限注入点——可升级读写(文件…

学习体系结构 - AArch64 异常模型

学习体系结构 - AArch64 异常模型 Learn the architecture - AArch64 Exception Model version 1.3 根据DeepL翻译 校准 1、Overview AArch64异常模型指南,介绍了Armv8-A和Armv9-A中的异常和特权模型。它涵盖了Arm架构中不同类型的异常以及处理器在处理异常时的行…

12/31

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读:用于密集预测的多路径视觉Transformer1、研究背景2、方法提出3、相关方法3.1、Vision Transformers for dense predictions3.2、C…

GAMES101:作业4记录

文章目录 总览算法编写代码:recursive_bezier()的实现Bezier()函数的实现提高部分:反走样 总览 Bzier 曲线是一种用于计算机图形学的参数曲线。在本次作业中,你需要实现 de Casteljau 算法来绘制由 4 个控制点表示的 Bzier 曲线 (当你正确实现该算法时,…

一次 irq_fpu_usable 内核报错排查总结

开发了一个内核ko模块async_memory_reclaim_for_cold_file_area(内核版本5.14.0-284.11.1),使用kprobe技术捕捉内核copy_page_to_iter()函数,在里边执行自定义的hot_file_update_file_status()函数,统计文件页page的访问信息,源码…

亚信安慧AntDB数据库两项目分别入选2023“星河”标杆、优秀案例

近日,由中国信息通信研究院、中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)共同组织的第七届大数据“星河(Galaxy)”案例评选结果公示,亚信安慧AntDB数据库两项目入选,其中“基于Ant…

国图公考:研究生可以考选调生吗?

研究生可以报考选调生吗?当然是可以的,但是同样需要满足一定的条件才可以。 除本科生外,具有硕士、博士学位的考生均可申请考试。但是,除了满足应届毕业生的身份,还需要满足年龄限制。一般来说,本科生不超过25岁&…

Kubernetes集群部署Rook Ceph实现文件存储,对象存储,块存储

Kubernetes集群部署Rook Ceph部署Ceph集群 1. Rook Ceph介绍 Rook Ceph是Rook项目中的一个存储方案,专门针对Ceph存储系统进行了优化和封装。Ceph是一个高度可扩展的分布式存储系统,提供了对象存储、块存储和文件系统的功能,广泛应用于提供…

FTP简介FTP服务器的搭建【虚拟机版】以及计算机端口的介绍

目录 一. FTP简介 二. FTP服务器的搭建【虚拟机Windows2012版】 1. 启用防火墙 2. 打开服务器管理器➡工具➡计算机管理 3. 选择本地用户与组➡新建组 4. 给组命名,输入描述,点击创建 5. 新建用户,设置用户名称,添加描述&a…

传感器原理与应用复习--光电式与半导体式传感器

文章目录 上一篇光电传感器光电器件 光纤传感器光纤传感器的工作原理及组成 半导体传感器下一篇 上一篇 传感器原理与应用复习–磁电式与霍尔传感器 光电传感器 光电器件 每个光子的能量为 E h v E hv Ehv h为普朗克常数 6.626 ∗ 1 0 − 34 ( J / s ) 6.626 * 10^{-…

【ARMv8M Cortex-M33 系列 2.3 -- SEGGER JFlash 烧写命令介绍】

请阅读【嵌入式开发学习必备专栏 之Cortex-M33 专栏】 文章目录 SEGGER JFlash 烧写命令介绍JFlash 配置文件 固件烧写地址介绍确定烧写地址 SEGGER JFlash 烧写命令介绍 本文以介绍烧写 Renesas RA4M2 为例,对 JFlash 进行简单介绍。它是 ARM Cortex-M33 微控制器…

华为ensp网络设计期末测试题-复盘

网络拓扑图 地址分配表 vlan端口分配表 需求 The device is running!<Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]un in en Info: Information center is disabled. [Huawei]sys S1 [S1]vlan 99 [S1-vlan99]vlan 100 [S1-vlan100]des IT [S1-…

camel-ai的role_playing代码解读

这段代码定义了一个名为RolePlaying的类&#xff0c;用于两个角色之间的角色扮演。 该类接受以下参数&#xff1a; assistant_role_name (str): 助手扮演的角色名称。user_role_name (str): 用户扮演的角色名称。critic_role_name (str): 评论家扮演的角色名称。带有”:obj:&…

2023 全球 AI 大事件盘点

本文来自微信公众号硅星人

跨境电商的语言障碍:翻译工具的必要性

随着全球化的加速和电子商务的普及&#xff0c;跨境电商逐渐成为企业拓展市场的重要渠道。然而&#xff0c;跨境电商在带来无限商机的同时&#xff0c;也面临着语言障碍的挑战。由于不同国家和地区的语言和文化差异&#xff0c;跨境电商在产品描述、用户沟通、广告宣传等方面需…