HarmonyOS入门笔记--页面和自定义组件生命周期

文章目录

    • 页面和自定义组件生命周期
      • 页面生命周期
      • 组件生命周期
      • 生命周期的调用时机

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

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(首页)生命周期。
在这里插入图片描述

自定义组件和页面的关系:

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

页面生命周期

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

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
  • onBackPress:当用户点击返回按钮时触发。

组件生命周期

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

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • aboutToDisappear:在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

生命周期的调用时机

// 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('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也同时也声明了组件的生命周期函数

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

  • 删除Child组件,会执行Child aboutToDisappear方法。

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

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

  • 如果调用的是router.replaceUrl,则当前Index页面被销毁,执行的生命周期流程将变为:Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到,组件的销毁是从组件树上直接摘下子树,所以先调用父组件的aboutToDisappear,再调用子组件的aboutToDisappear,然后执行初始化新页面的生命周期流程。

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

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

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

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

相关文章

EdgeGallery开发指南

API接口 简介 EdgeGallery支持第三方业务系统通过北向接口网关调用EdgeGallery的业务接口。调用流程如下图所示(融合前端edgegallery-fe包含融合前端界面以及北向接口网关功能,通过浏览器访问时打开的是融合前端的界面,通过IP:Port/urlPref…

机器学习——聚类算法-KMeans聚类

机器学习——聚类算法-KMeans聚类 在机器学习中,聚类是一种无监督学习方法,用于将数据集中的样本划分为若干个簇,使得同一簇内的样本相似度高,不同簇之间的样本相似度低。KMeans聚类是一种常用的聚类算法之一,本文将介…

已经建立了TCP连接,如果还接收到了SYN会如何处理

这个场景中,客户端的 IP、服务端 IP、目的端口并没有变化,所以这个问题关键要看客户端发送的 SYN 报文中的源端口是否和上一次连接的源端口相同。 客户端的 SYN 报文里的端口号与历史连接不相同 如果客户端恢复后发送的 SYN 报文中的源端口号跟上一次连接…

反应式编程(二)什么是粘包、拆包?如何解决?

目录 一、粘包、拆包介绍1.1 什么是 TCP 协议?1.2 什么是粘包、拆包?1.3 粘包、拆包的四种情况1.4 粘包、拆包的原因1)TCP协议中的滑动窗口机制2)传输层的 MSS 与链路层的 MTU3)TCP协议中的 Nagle 算法4)应…

布隆过滤器详讲

本文旨在讲解布隆过滤器的原理以及实现方式,希望通过本文能使读者对布隆过滤器有一定的认识! 一、布隆过滤器的引入 在讲解布隆过滤器之前,我们还是先提及一下前面讲的位图行,位图可以处理大量的数据,广泛用于查找等…

LoadBalance 负载均衡服务调用

前身:Ribbon LB负载均衡(Load Balance)是什么 简单的说就是将用户的请求平摊的分配到多个服务上,从而达到系统的HA(高可用),常见的负载均衡有软件Nginx,LVS,硬件 F5等 spring-cloud-starter-loadbalancer组…

【独立开发前线】Vol.23 这个卖Excel课程的网站,月访问量14.5万,年销售额超过200万美金

今天要给大家分享的案例网站是:Miss-Excel 网址是:Miss Excel 这是一个专门销售Excel课程的网站,网址一共有18个系列的视频课程,最便宜的44美金,最贵的1197美金。所有的课程都是网站的创始人Kat Norton录制的&#xf…

C语言文件操作详解

文件是什么 在我们日常使用的电脑上我们在电脑磁盘上会看到许许多多的文件夹,那里面的东西其实就是文件,为什么我们要使用文件?那是因为我们的电脑肯定会要用来存储东西的,如果没有文件,那么我们的东西都全部存放在内…

MySQL8.X驱动datetime映射问题

MySQL8.X驱动datetime映射问题 背景:项目由SSM项目迁移至SpringBoot,对mysql数据库驱动进行了升级导致出现问题。 原因:mysql驱动的8.X版本对数据库类型datetime映射为LocalDateTime。 解决:暂时不升级mysql驱动,mys…

【沐风老师】3DMAX顶点投影插件VertexProjection使用方法详解

3DMAX顶点投影插件VertexProjection使用教程 3DMAX顶点投影插件VertexProjection,将可编辑多边形顶点向下投影到网格对象表面。可以对可编辑多边形对象上的所有顶点或部分顶点进行投影。主要用于地形建模、道路交通等领域。 【适用版本】 3dMax 2010 - 2024&#x…

VR虚拟仿真在线模拟旅游专业情景

旅游专业运用VR虚拟仿真教学的教学优势主要包括: 1. 增强教学效果:VR技术能够提供身临其境的体验,使学生更容易理解和记住某些概念和理论。例如,学生可以通过虚拟旅行来了解某个国家的文化、历史和景点,这将比传统的课…

计算机网络(05)

计算机网络(04) 网络负载均衡 由多台服务器以对称的方式组成一个服务器集合每台服务器都具有等价的地位 , 可以单独对外提供服务而无须其他服务器的辅助均衡负载能够平均分配客户请求到服务器列阵,借此提供快速获取重要数据,解决…

ES6(一)箭头函数,解构赋值,模板字符串,let 和 const,类和继承

ES6(一)箭头函数,解构赋值,模板字符串,let 和 const,类和继承 01 箭头函数: 1.基本语法 // 普通函数 function regularFunction(a, b) {return a b; }// 箭头函数 const arrowFunction (a,…

vue3路由代码示例

路由简单分三步吧 第一定义路由&#xff1a; 包括访问地址&#xff0c;对应组件 第二使用&#xff1a;在index.html中使用它 下面是代码示例&#xff1a; components/Person.vue <template><router-link to"/test/hello">跳转</router-link>&…

一键换脸的facefusion

FaceFusion 一个开源换脸软件&#xff0c;提供UI界面&#xff0c;启动后可直接在浏览器上面上传图片进行换脸操作。 电脑环境win10&#xff0c;软件pycharm&#xff0c;需要提前安装好python环境&#xff0c;推荐使用Anaconda3。关注文章下方公共号发送 “ 软件安装包 ”可以获…

Leetcode239_滑动窗口最大值

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口…

Docker Compose 中spring boot服务连接 mysql

Docker compose 启动两个docker ,一个是mysql, 另一个是spring boot 服务。spring boot 服务要连接mysql8 。传统的做法&#xff1a; 在application.properties 文件中配置 spring.datasource.urljdbc:mysql://127.0.0.1:3306/mydatabase spring.datasource.usernameroot spr…

java springboot vue elementui python django vue 30套源代码

java springboot vue elementui python django vue 30套源代码 全套源码 Springboot vue3 elementplus 后台通用权限系统 代码生成器 (源码教程开发环境) Springboot vue2 elementui 后台通用权限系统 代码生成器(源码教程开发环境) Springboot vue2 elementui 物品出入库管…

夜莺浏览日志、filebeat采集日志(四)

文章目录 一、elasticsearch二、filebeat三、日志分析 一、elasticsearch docker启动 docker run -d -p 9200:9200 -p 9300:9300 --restartalways -e ES_JAVA_OPTS"-Xms512m -Xmx512m" \ -e discovery.typesingle-node -e xpack.security.enabledtrue -e ELASTIC_P…

plantegg-10+倍性能提升全过程–优酷账号绑定淘宝账号的TPS从500到5400的优化历程

原文地址:https://plantegg.github.io/2018/01/23/10%E5%80%8D%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87%E5%85%A8%E8%BF%87%E7%A8%8B/ 背景说明 2016年的双11在淘宝上买买买的时候&#xff0c;天猫和优酷土豆一起做了联合促销&#xff0c;在天猫双11当天购物满XXX元就赠送优酷会…