构建第一个ArkTS之页面和自定义组件生命周期

在开始之前,我们先明确自定义组件和页面的关系:

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

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

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

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

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

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。

根据上面的流程图,我们从自定义组件的初始创建、重新渲染和删除来详细解释。

自定义组件的创建和渲染流程

  1. 自定义组件的创建:自定义组件的实例由ArkUI框架创建。
  2. 初始化自定义组件的成员变量:通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量,初始化顺序为成员变量的定义顺序。
  3. 如果开发者定义了aboutToAppear,则执行aboutToAppear方法。
  4. 在首次渲染的时候,执行build方法渲染系统组件,如果子组件为自定义组件,则创建自定义组件的实例。在首次渲染的过程中,框架会记录状态变量和组件的映射关系,当状态变量改变时,驱动其相关的组件刷新。

当应用在后台启动时,此时应用进程并没有销毁,所以仅需要执行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 aboutToAppear
      if (this.showChild) {
        Child()
      }
      // this.showChild为false,删除Child子组件,执行Child aboutToDisappear
      Button('delete Child').onClick(() => {
        this.showChild = false;
      })
      // push到Page2页面,执行onPageHide
      Button('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。
  • 点击“delete Child”,if绑定的this.showChild变成false,删除Child组件,会执行Child aboutToDisappear方法。
  • 点击“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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

nginx到底是怎么工作的

工作流程 用户通过域名发出访问Web服务器的请求,该域名被DNS服务器解析为反向代理服务器的IP地址反向代理服务器接受用户的请求反向代理服务器在本地缓存中查找请求的内容,找到后直接把内容发送给用户如果本地缓存里没有用户所请求的信息内容&#xff0…

【Java】Java中类的初始化顺序(静态方法,静态块,非静态块,最后有流程图)

📝个人主页:哈__ 期待您的关注 在日常使用Java的时候,我们都接触过new这个关键字,那你是否知道在我们的对象真正创建出来之前都做了哪些事情呢? 实际上要去判断一个类的初始化的顺序,需要分一下情况&…

Qt使用QWidget重绘实现圆环形渐变色进度条(支持不确定进度模式)

效果如下: 从纯竖直方向顶部蓝色到底部青色的渐变。 从左上角偏左45到右下角偏右45的蓝色到青色渐变。 从左上角偏左22.5到右下角偏右22.5的蓝色到青色渐变。(这个角度渐变最好看) 可以选择添加背景图片 支持两种模式:正常进度模…

媒体邀约专访如何深入的做一篇专访报道?流程分享

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 进行媒体邀约专访并深入撰写一篇专访报道是一个系统性工作,涉及多个环节。以下是一个详细的流程分享: 一、前期准备 确定专访目的与主题:明确专访希…

Training - 使用 WandB 配置管理模型训练过程

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/137529140 WandB (Weights&Biases) 是轻量级的在线模型训练可视化工具,类似于 TensorBoard,可以帮助用户跟踪…

可编程网关:如何助力智慧工厂实现智能化管理

一个具体的实际案例,详细说明可编程网关在某汽车零部件智慧工厂中的应用细节: 案例背景: 某大型汽车零部件制造企业,致力于提升生产效率、降低运营成本、确保产品质量,决定对其传统工厂进行全面数字化改造&#xff0…

从零开始:一步步学习爬虫技术的实用指南(一)

从零开始:一步步学习爬虫技术的实用指南(一) Urllib1.什么是互联网爬虫2.爬虫核心3.爬虫的用途4.爬虫的分类4.1 通用爬虫:4.1 聚焦爬虫: 5.反爬手段5.1 User‐Agent:5.2.代理IP5.3.验证码访问5.4.动态加载网…

深入理解JVM后端优化技术-逃逸分析(Escape Analysis)

相关系统 深入理解jvm执行引擎-CSDN博客 深入理解JVM后端优化技术-方法内联-CSDN博客 定义 当一个对象在方法里面被定义后,它可能让外部方法所引用,作为调用参数传递到其它的方法中,这种称为方法逃逸;还有可能被外部线程访问到,赋值给可以在其它线程中访问的实例数量,这…

【测试篇】Selenium + Java环境搭建

文章目录 Selenium Java环境搭建配置系统环境变量PATH验证环境是否搭建成功常见问题&解决办法 Selenium Java环境搭建 Java版本最低要求为8,这里默认大家都下载好了Java。😆 下载chrome浏览器(点我下载) 观察chrome版本。…

混合专家(MoE)模型

文心一言 混合专家模型(Mixture of Experts,简称MoE)是一种基于Transformer架构的模型设计策略。它通过将多个模型(称为“专家”)直接结合在一起,以获得更好的预测性能。这种模型特别适用于处理大规模数据…

学习操作系统之多道批处理系统

1964年IBM生产了第一台小规模集成电路计算机IBM System/360(第三代计算机),并为该计算机开发了OS/360操作系统,是第一个多道批处理系统。 多道批处理的运行机制: 多道批处理系统同样要求事先将多道作业存放到外存上并…

人工智能_大模型023_AssistantsAPI_01_OpenAI助手的创建_API的调用_生命周期管理_对话服务创建---人工智能工作笔记0159

先来说一下一些问题: 尽量不要微调,很麻烦,而且效果需要自己不断的去测试. 如果文档中有图表,大量的图片去分析就不合适了. 是否用RAG搜索,这个可以这样来弄,首先去es库去搜能直接找到答案可以就不用去RAG检索了,也可以设置一个分,如果低于60分,那么就可以去进行RAG检索 微…

​泛微文书定人事档案一体化管理,覆盖人事管理全过程,人事档案全量归档

人事档案是个人身份、学历、资历等方面的证据,与个人工资待遇、社会劳动保障、组织关系紧密挂钩,具有法律效力。应注重收集和鉴别、整理工作,提升人事档案利用率。 企业应依据国家有关人事档案管理规定,制定企业人事档案管理办法&…

python机器学习-乳腺癌细胞挖掘和生存分析(2024年新版)

​ 随着人们生活水平提高,大家不仅关注如何生活,而且关注如何生活得更好。在这个背景下,精准治疗和预测诊断成为当今热门话题。 据权威医学资料统计,全球大约每13分钟就有一人死于乳腺癌,乳腺癌已成为威胁当代人健康的…

DataEase-V1.18版本源码通过Docker镜像部署与静态资源通过阿里云OSS存储实现看这一篇就够了

修改DataEase实现静态资源阿里云OSS存储 后端源码文件读取配置类配置 1.阿里云OSS配置类 /*** ClassName AliyunConfig.java* author shuyixiao* version 1.0.0* Description 阿里云OSS配置* createTime 2024年04月03日 10:03:00*/ Data Configuration public class AliyunC…

创建型模式--5.建造者模式【卡雷拉公司】

1. 造船,我是专业的 在海贼世界中,水之都拥有全世界最好的造船技术,三大古代兵器之一的冥王就是由岛上的造船技师们制造出来的。现在岛上最大、最优秀的造船公司就是卡雷拉公司,它的老板还是水之都的市长,财富权力他都…

大话设计模式——11.桥接模式(Bridge Pattern)

简介 将抽象部分与它的实现部分分离,使它们可以独立变化。 UML图: 应用场景: 系统需要在构建的抽象化角色和具体化角色之间增加更多的灵活性不想使用继承导致系统类的个数急剧增加某个类存在多个变化维度使用继承方式容易出现类的膨胀 示例…

护眼台灯什么牌子好?爱德华、书客、明基护眼台灯真实测评

台灯是我们日常比较实用的一盏桌面照明灯具,不管是休闲看书、学习、办公都会用得上。如果使用了一款光源不好的台灯,时间长了可能就会影响我们的眼睛健康,特别是孩子的眼睛,还没有发育完全,影响更大。 在面临如今市面上…

设计模式——2_7 状态(State)

欲买桂花同载酒,终不似,少年游 ——刘过《唐多令芦叶满汀州》 文章目录 定义图纸一个例子:如何模拟一个转笔刀自动转笔刀PencilPencilSharpener 投诉和改善钝刀BladePencilSharpener 没有铅笔PencilSharpener if if ifStatePencilSharpener 碎…

动态物体检测 | 复杂环境下多目标动态物体实时检测算法实现

项目应用场景 面向复杂环境下的多目标动态物体实时检测场景,项目采用一种在线体积映射的算法实现。 项目效果 项目细节 > 具体参见项目 README.md (1) 安装、编译工程,包括 ROS,具体步骤参见 README(2) 执行 DOALS Sequence roslaunch d…