HarmonyOS鸿蒙学习笔记(28)@entry和@Component的生命周期

@entry和@Component的生命周期

  • @entry和@Component的关系
    • @Component生命周期
    • @Entry生命周期
  • 生命周期流程图
  • 生命周期展示示例代码
  • 参考资料

HarmonyOS的生命周期可以分为@Compnent的生命周期和@Entry的生命周期,也就是自定义组件的生命周期和页面的生命周期。

@entry和@Component的关系

@Component生命周期

@Component即自定义组件,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。其生命周期有2个:
aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。不建议在生命周期aboutToDisappear内使用async await,如果在生命周期的aboutToDisappear使用异步操作(Promise或者回调方法),自定义组件将被保留在Promise的闭包中,直到回调方法被执行完,这个行为阻止了自定义组件的垃圾回收。

@Entry生命周期

@Entry即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。其生命周期有三个方法
onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。

onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。

onBackPress:当用户点击返回按钮时触发。

生命周期流程图

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。
在这里插入图片描述
可以看出先执行@Compent组件的aboutToAppear和build,然后在执行@Entry的onPageShow.逻辑也很简单,只有先构建@Component组件,整个UI才能展示出来。

生命周期展示示例代码

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

// Index.ets
import router from '@ohos.router';

struct MyComponent { showChild: boolean = true; btnColor:string = "#FF007DFF"// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('Index onBackPress');this.btnColor ="#FFEE0606"return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理}// 组件生命周期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('delete Child').margin(20).backgroundColor(this.btnColor).onClick(() => {this.showChild = false;})// push到page页面,执行onPageHideButton('push to next page').onClick(() => {router.pushUrl({ url: 'pages/page' });})}}
}
struct Child { title: string = 'Hello World';// 组件生命周期aboutToDisappear() {console.info('[lifeCycle] Child aboutToDisappear')}// 组件生命周期aboutToAppear() {console.info('[lifeCycle] Child aboutToAppear')}build() {Text(this.title).fontSize(50).margin(20).onClick(() => {this.title = 'Hello ArkUI';})}
}//第二个页面 page.ets


struct page { textColor: Color = Color.Black; num: number = 0onPageShow() {this.num = 5}onPageHide() {console.log("page onPageHide");}onBackPress() { // 不设置返回值按照false处理this.textColor = Color.Greythis.num = 0}aboutToAppear() {this.textColor = Color.Blue}build() {Column() {Text(`num 的值为:${this.num}`).fontSize(30).fontWeight(FontWeight.Bold).fontColor(this.textColor).margin(20).onClick(() => {this.num += 5})}.width('100%')}
}

以上示例中,Index页面包含两个自定义组件:

  • 一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;

  • 一个是Child,是MyComponent的子组件。

  • 应用冷启动的初始化流程为:MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。

  • 点击“delete Child”,if绑定的this.showChild变成false,删除Child组件,会执行Child aboutToDisappear方法。谁消失就执行谁的 aboutToDisapper方法

  • 点击“push to next page”,调用router.pushUrl接口,跳转到另外一个页面,当前Index页面隐藏,执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口,Index页面被隐藏,并没有销毁,所以只调用onPageHide。跳转到新页面后,执行初始化新页面的生命周期的流程。

  • 如果调用的是router.replaceUrl,则当前Index页面被销毁,执行的生命周期流程将变为:Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。可以看出组件的销毁是从组件树上直接摘下子树,所以先调用父组件的aboutToDisappear,再调用子组件的aboutToDisappear,(所谓皮之不存毛将焉附),然后执行初始化新页面的生命周期流程。

  • 点击返回按钮,触发页面生命周期Index onBackPress,且触发返回一个页面后会导致当前Index页面被销毁。

  • 最小化应用或者应用进入后台,触发Index onPageHide。当前Index页面没有被销毁,所以并不会执行组件的aboutToDisappear。应用回到前台,执行Index onPageShow。

  • 退出应用,执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

参考资料

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

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

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

相关文章

RabbitMQ-发布/订阅模式

RabbitMQ-默认读、写方式介绍 RabbitMQ-直连交换机(direct)使用方法 目录 1、发布/订阅模式介绍 2、交换机(exchange) 3、fanout交换机的使用方式 3.1 声明交换机 3.2 发送消息到交换机 3.2 扇形交换机发送消息代码 3.2 声明队列,用于接收消息 3.3 binding …

sigmoid, softmax

∙ \bullet ∙ sigmoid函数 值域(0,1) 常用于二分类问题 ∙ \bullet ∙ softmax函数 每一项的区间范围的(0,1) 所有项相加的和为1. 常用于多分类问题 ∙ \bullet ∙ 区别: softmax 当类别数是2时,它退化为二项分布,而它和sigmoid真正的区别…

解决VSCode右键没有Open In Default Browser问题

在VSCode进行Web小程序测试时,我们在新建的HTML文件中输入 !会自动生成页面代码骨架,写入内容后,我们想要右键在浏览器中预览。发现右键没有“Open In Default Browser”选项。原因是没有安装插件。 下面是解决方案:首先在VSCode找…

探索 Android Studio 中的 Gemini:加速 Android 开发的新助力

探索 Android Studio 中的 Gemini:加速 Android 开发的新助力 在 Gemini 时代的下一篇章中,Gemini融入了更多产品中,Android Studio 正在使用 Gemini 1.0 Pro 模型,使 Android 开发变得更快、更简单。 Studio Bot 现已更名为 And…

The Isle恐龙岛服务器开服联机教程

服务端区别:The lsle 是测试服 ;The lsle Evrima 是正式服(运行内存需要上到12G才可以运行) 1、购买后登录服务器 进入控制面板后会出现正在安装的界面,安装大约5分钟(如长时间处于安装中请联系我们的客服人…

Unity 自定义编辑器根据枚举值显示变量

public class Test : MonoBehaviour {[HideInInspector][Header("数量")][SerializeField]public int num;[Header("分布类型")][SerializeField]public DistributionType distType;[HideInInspector][Header("位置")][SerializeField]public Li…

Vue之组件基础(插槽)

在HTML中,开发者可以在双标签内添加一些信息。而在Vue中,组件以标签的形式引用,那么如何在组件的标签内添加一些信息并将信息渲染到页面中呢?其实,Vue 提供了插槽,专门用来实现这样的效果。 一.什么是插槽 Vue为组件…

视频修复工具助你完成高质量的视频作品!

在短视频发展兴起的时代,各种视频层出不穷的出现在了视野中,人们已经从追求数量转向追求质量。内容相同的视频,你视频画质好、质量高的更受大家欢迎,那么如何制作高质量、高清晰度的视频呢?与您分享三个视频修复工具。…

命名空间,缺省参数和函数重载

前言:本文章主要介绍一些C中的小语法。 目录 命名空间 namespace的使用 访问全局变量 namespace可以嵌套 不同文件中定义的同名的命名空间可以合并进一个命名空间,并且其中不可以有同名的变量 C中的输入和输出 缺省参数(默认参数&#…

电脑的kernelbase.dll故障怎么处理?kernelbase.dll是什么文件

遇到由于“kernelbase.dll”文件出错导致的应用程序崩溃或系统不稳定的问题。这种情况不仅会影响工作效率,还可能导致数据损失或更严重的系统问题。kernelbase.dll是Windows操作系统中的一个关键系统文件,它包含了多个执行基础系统功能的程序代码。因此&…

3389连接器,3389连接器如何进行安全设置

在计算机网络领域,3389端口作为Windows系统默认的远程桌面协议(RDP)端口,在远程办公、技术支持等场景中发挥着重要作用。然而,由于其广泛的使用和直接暴露在互联网上的特性,3389端口也极易成为黑客攻击的目…

python 贪心算法(Greedy Algo)

贪婪是一种算法范式,它逐步构建解决方案,始终选择提供最明显和直接收益的下一个部分。贪婪算法用于解决优化问题。 如果问题具有以下属性,则可以使用贪心法解决优化问题: 每一步,我们都可以做出当前看来最好的选择&…

git 恢复本地文件被误删除

查找自己执行命令出现的文件移除 或者创建的地方找到提交的 哈希值 然后执行 命令 git checkout c818f15(这个后面是你执行的哈希代码) main 里面有个代码值 把这个复制到你的命令行就好了 执行 然后就恢复文件了 还有一个是查找命令日志的 如果不小心…

[数据集][目标检测]水下管道泄漏破损检测数据集VOC+YOLO格式2069张2类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2069 标注数量(xml文件个数):2069 标注数量(txt文件个数):2069 标注…

企业百度百科如何修改

百度百科是一个可以让我们快速的了解一个企业情况的地方,同时也让我们的企业展示了什么,还有哪些是可以做的。 注册与登录 首先,你需要注册一个百度账号,并通过邮箱或手机进行验证。登录后,可以开始创建或编辑百度百科…

你还不知道的APP安全测试项总结!

一、安装包测试 1.1、关于反编译 目的是为了保护公司的知识产权和安全方面的考虑等,一些程序开发人员会在源码中硬编码一些敏感信息,如密码。而且若程序内部一些设计欠佳的逻辑,也可能隐含漏洞,一旦源码泄漏,安全隐患…

深度学习入门-第3章-神经网络

前面的待补充 3.6 手写数字识别 3.6.1 MNIST 数据集 本书提供了便利的 Python 脚本 mnist.py ,该脚本支持从下载 MNIST 数据集到将这些数据转换成 NumPy 数组等处理(mnist.py 在 dataset 目录下)。 使用 mnist.py 时,当前目录必须…

PolygonalSurfaceContourLineInterpolator 多边形交互器

1. 效果: 2.简介: 可以实现在多边形上进行交互,选择;在多边形曲面上实现轮廓点的交互绘制。 该类的使用需要结合 vtkPolygonalSurfacePointPlacer 类,定位点的功能也就是拾取器。 前提:输入的多边形曲面…

python第五次作业

1.请实现一个装饰器,每次调用函数时,将函数名字以及调用此函数的时间点写入文件中 # 导入datetime模块,用于获取当前时间并格式化输出 import datetime# 定义一个装饰器工厂函数log_funcName_time,它接受一个参数time def log_fu…

军用电源性能测试有哪些测试项目?需要遵循什么标准?

为了确保军用电源在极端条件下能够正常工作,必须对其进行一系列严格的性能测试。这些测试不仅包括效率、电压调整率和负载调整率等基本参数的测试,还包括动态响应能力、绝缘电阻、耐压测试、温度系数以及高低温循环等综合性能的评估。 测试项目 效率 电压…