HarmonyOS（五）—— 认识页面和自定义组件生命周期

news2024/9/22 17:32:50

前言

在前面我们通过如何创建自定义组件一文知道了如何如何自定义组件以及自定义组件的相关注意事项，接下来我们认识一下页面和自定义组件生命周期。

自定义组件和页面的关系

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

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

生命周期

下面依次介绍页面和组件的生命周期函数。

1:页面生命周期

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

  • onPageShow：页面每次显示时触发。
onPageShow?(): void

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

  • onPageHide：页面每次隐藏时触发一次。
onPageHide?(): void

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

  • onBackPress：当用户点击返回按钮时触发。
onBackPress?(): void

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

onPageShow，onPageHide，onBackPress生命周期简单使用列子如下：

// xxx.ets
@Entry
@Component
struct IndexComponent {
  @State textColor: Color = Color.Black;

  onPageShow() {
    this.textColor = Color.Blue;
    console.info('IndexComponent onPageShow');
  }

  onPageHide() {
    this.textColor = Color.Transparent;
    console.info('IndexComponent onPageHide');
  }

  onBackPress() {
    this.textColor = Color.Red;
    console.info('IndexComponent onBackPress');
  }

  build() {
    Column() {
      Text('Hello World')
        .fontColor(this.textColor)
        .fontSize(30)
        .margin(30)
    }.width('100%')
  }
}

2:组件生命周期

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

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

aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。

注意⚠️：从API version 9开始，该接口支持在ArkTS卡片中使用。

  • aboutToDisappear：在自定义组件即将析构销毁时执行。
aboutToDisappear?(): void

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

注意⚠️：从API version 9开始，该接口支持在ArkTS卡片中使用。

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件生命周期。
在这里插入图片描述
根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。

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

  1. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
  2. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
  3. 如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
  4. 在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：

a: 状态变量 -> UI组件（包括ForEach和if）。
b: UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。

build() {
  ...
  this.observeComponentCreation(() => {
    Button.create();
  })

  this.observeComponentCreation(() => {
    Text.create();
  })
  ...
}

当应用在后台启动时，此时应用进程并没有销毁，所以仅需要执行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('create or 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也同时也声明了组件的生命周期函数。

  1. 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。
  2. 点击“delete Child”，if绑定的this.showChild变成false，删除Child组件，会执行Child aboutToDisappear方法。
  3. 点击“push to next page”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。
  4. 如果调用的是router.replaceUrl，则当前Index页面被销毁，执行的生命周期流程将变为：Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到，组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。
  5. 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被销毁。
  6. 最小化应用或者应用进入后台，触发Index onPageHide。当前Index页面没有被销毁，所以并不会执行组件的aboutToDisappear。应用回到前台，执行Index onPageShow。
  7. 退出应用，执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于C#实现线段树

基于C#实现线段树

一、线段树 线段树又称"区间树”，在每个节点上保存一个区间，当然区间的划分采用折半的思想，叶子节点只保存一个值，也叫单元节点，所以最终的构造就是一个平衡的二叉树，拥有 CURD 的 O(lgN)的时间。 从…
阅读更多...
解决：javax.websocket.server.ServerContainer not available 报错问题

解决：javax.websocket.server.ServerContainer not available 报错问题

原因： 用于扫描带有 ServerEndpoint 的注解成为 websocket，该方法是 服务器端点出口，当进行 SpringBoot 单元测试时，并没有启动服务器，所以当加载到这个bean时会报错。 解决方法： 加上这个注解内容 Spr…
阅读更多...
不做机器视觉工程师，转行，转岗的建议与想法

不做机器视觉工程师，转行，转岗的建议与想法

正所谓外行看热闹，内行看门道。提前咨询前辈们，多问问，多看看。要做就做，一定要提前做好防范。 无论你是要转行或者是转岗，看你有没有本钱和试错成本 有些人，家庭好，可以一直去试错和从头再来。…
阅读更多...
MySQL 8 配置文件详解与最佳实践

MySQL 8 配置文件详解与最佳实践

MySQL 8 是一款强大的关系型数据库管理系统，通过适当的配置文件设置，可以充分发挥其性能潜力。在这篇博客中，我们将深入探究 MySQL 8 常用的配置文件，并提供一些建议，帮助您优化数据库性能。 配置文件概览 在 MySQL …
阅读更多...
4.常见面试题--操作系统

4.常见面试题--操作系统

特点：并发性、共享性、虚拟性、异步性。 Windows 和 Linux 内核差异 对于内核的架构⼀般有这三种类型： ● 宏内核，包含多个模块，整个内核像⼀个完整的程序； ● 微内核，有⼀个最⼩版本的内核&#xff0…
阅读更多...
linux的基础命令

linux的基础命令

文章目录 linux的基础命令一、linux的目录结构（一）Linux路径的描述方式 二、Linux命令入门（一）Linux命令基础格式 三、ls命令（一）HOME目录和工作目录（二）ls命令的参数1.ls命令的-a选…
阅读更多...
Java项目如何打包成Jar（最简单）

Java项目如何打包成Jar（最简单）

最简单的办法，使用Maven插件（idea自带） 1.选择需要打包的mudule，点击idea右侧的maven插件 2.clean操作 3.选择需要的其他mudule，进行install操作（如果有） 4.再次选择需要打包的module&#…
阅读更多...
UDP客户端使用connect与UDP服务器使用send函数和recv函数收发数据

UDP客户端使用connect与UDP服务器使用send函数和recv函数收发数据

服务器代码编译运行 服务器udpconnectToServer.c的代码如下&#xff1a; #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<arpa/inet.h> #include<sys/socket.h> #include<errno.h> #inclu…
阅读更多...
什么是网络爬虫技术？它的重要用途有哪些？

什么是网络爬虫技术？它的重要用途有哪些？

网络爬虫&#xff08;Web Crawler&#xff09;是一种自动化的网页浏览程序&#xff0c;能够根据一定的规则和算法&#xff0c;从互联网上抓取和收集数据。网络爬虫技术是随着互联网的发展而逐渐成熟的一种技术&#xff0c;它在搜索引擎、数据挖掘、信息处理等领域发挥着越来越重…
阅读更多...
CentOS Stream 9系统Cgroup问题处理

CentOS Stream 9系统Cgroup问题处理

安装docker容器启动失败 之前适配过Ubuntu系统的容器&#xff0c;由于版本比较高&#xff0c;没有挂载Cgroup的路径。这次使用Centos Stream 9系统安装docker容器时也遇到了这个情况。由于处理方式有些不一样&#xff0c;所以记录一下。 这是docker容器启动过报错的输出日志。…
阅读更多...
C#串口通信从入门到精通（27）——高速通信下解决数据处理慢的问题（20ms以内）

C#串口通信从入门到精通（27）——高速通信下解决数据处理慢的问题（20ms以内）

前言 我们在开发串口通信程序时，有时候会遇到比如单片机或者传感器发送的数据速度特别快，比如10ms、20ms发送一次，并且每次发送的数据量还比较大，如果按照常规的写法，我们会发现接收的数据还没处理完，新的数据又发送过来了，这就会导致处理数据滞后，软件始终处理的不是…
阅读更多...
5G智慧工地整体解决方案：文件全文115页，附下载

5G智慧工地整体解决方案：文件全文115页，附下载

关键词&#xff1a;5G智慧工地&#xff0c;智慧工地建设方案&#xff0c;智慧工地管理平台系统&#xff0c;智慧工地建设调研报告&#xff0c;智慧工地云平台建设 一、5G智慧工地建设背景 5G智慧工地是利用5G技术、物联网、大数据、云计算、AI等信息技术&#xff0c;围绕“人…
阅读更多...
docker 安装常用环境

docker 安装常用环境

一、 安装linux&#xff08;完整&#xff09; 目前为止docker hub 还是被封着&#xff0c;用阿里云、腾讯云镜像找一找版本直接查就行 默认使用latest最新版 #:latest 可以不写 docker pull centos:latest # 拉取后查看 images docker images #给镜像设置标签 # docker tag […
阅读更多...
pytorch训练模型内存溢出

pytorch训练模型内存溢出

1、训练模型命令命令 如下所示是训练命名实体识别的命令&#xff0c;在win10系统下执行 activate pytorch cd F:\Python\github\ultralytics-main\submain\pytorch_bert_bilstm_crf_ner-main f: python main.py --bert_dir"../model_hub/chinese-bert-wwm-ext/" --…
阅读更多...
【Fusion 360环境搭建】保姆级贴心教程

【Fusion 360环境搭建】保姆级贴心教程

文章目录 选择Fusion 360的理由一、Fusion 360注册账号二、安装 选择Fusion 360的理由 稚辉君推荐&#xff01; 一、Fusion 360注册账号 官网网址 https://www.autodesk.com.cn/products/fusion-360 贴心提示&#xff1a;访问不了时试试手机热点 选择“ 教育” &#xf…
阅读更多...
【Java】初识JDBC

【Java】初识JDBC

&#x1f33a;个人主页&#xff1a;Dawn黎明开始 &#x1f380;系列专栏&#xff1a;Java ⭐每日一句&#xff1a;向阳而生&#xff0c;逐光而行 &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️ 文章目录 &#x1f4cb;前言 …
阅读更多...
【2023 云栖】阿里云刘一鸣：Data+AI 时代大数据平台建设的思考与发布

【2023 云栖】阿里云刘一鸣：Data+AI 时代大数据平台建设的思考与发布

云布道师 本文根据 2023 云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;刘一鸣 | 阿里云自研大数据产品负责人 演讲主题&#xff1a;DataAI 时代大数据平台应该如何建设 今天分享的主题是 DataAI 时代大数据平台应该如何建设&#xff0…
阅读更多...
python+django高校科研项目管理系统2u3mx

python+django高校科研项目管理系统2u3mx

高校科研项目管理系统采用拟开发的高校科研项目管理系统通过测试,确保在最大负载的情况下稳定运转,各个模块工作正常,具有较高的可用性。系统整体界面简洁美观,用户使用简单,满足用户需要。在因特网发展迅猛的当今社会,高校科研项目管理系统必然会成为在数字信息化建设的一个重…
阅读更多...
51单片机应用从零开始（七）·循环语句（if语句，swtich语句）

51单片机应用从零开始（七）·循环语句（if语句，swtich语句）

51单片机应用从零开始&#xff08;一&#xff09;-CSDN博客 51单片机应用从零开始&#xff08;二&#xff09;-CSDN博客 51单片机应用从零开始&#xff08;三&#xff09;-CSDN博客 51单片机应用从零开始&#xff08;四&#xff09;-CSDN博客 51单片机应用从零开始&#xff08;…
阅读更多...
【数据结构（C语言）】浅谈栈和队列

【数据结构（C语言）】浅谈栈和队列

目录 文章目录 前言 一、栈 1.1 栈的概念及结构 1.2 栈的实现 1.2.1. 支持动态增长的栈的结构 1.2.2 初始化栈 1.2.3 入栈 1.2.4 出栈 1.2.5 获取栈顶元素 1.2.6 获取栈中有效元素个数 1.2.7 检查栈是否为空 1.2.8 销毁栈 二、队列 2.1 队列的概念及结构 2.2 队…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023