当前位置: 首页 > news >正文

【HarmonyOS】HarmonyOS NEXT学习日记:七、页面与组件的生命周期

【HarmonyOS】HarmonyOS NEXT学习日记:七、页面与组件的生命周期

页面和组件

  • 组件:用@Component装饰的代码称为自定义组件
  • 页面:@Entry装饰的组件即页面的根节点

组件生命周期

aboutToAppear:在创建自定义组件的新实例后,在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量,更改将在后续执行build()函数中生效。
aboutToDisappear:在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

页面生命周期

onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效。
onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景,仅@Entry装饰的自定义组件生效。
onBackPress:当用户点击返回按钮时触发,仅@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理。

代码示例

// Index.ets
import text from '@ohos.graphics.text'
import { router } from '@kit.ArkUI';
// 导入业务错误处理模块
import { BusinessError } from '@kit.BasicServicesKit';
@Builder function TextItem(text: string){Text(text).fontSize(18).fontColor(Color.Red).backgroundColor('#ccc').lineHeight(30).width('100%').textAlign(TextAlign.Center).onClick(()=>{router.pushUrl({ url: 'pages/Second' }).then(() => { // 调用 router 模块的 pushUrl 方法跳转到第二页console.info('Succeeded in jumping to the second page.') // 在控制台输出跳转成功的日志信息}).catch((err: BusinessError) => { // 捕捉跳转过程中的错误console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`) // 在控制台输出跳转失败的错误信息,包括错误代码和错误信息})})
}
@Entry
@Component
struct Index {@State text: string = '111'@State showChildren: boolean = false;onPageShow() {this.text = 'onPageShow';console.info('IndexComponent onPageShow');}onPageHide() {this.text = 'onPageHide';console.info('IndexComponent onPageHide');}aboutToAppear(){this.text = '222'console.info('IndexComponent aboutToAppear');}aboutToDisappear(){console.info('IndexComponent aboutToDisappear');}build() {Column(){TextItem(this.text)if(this.showChildren){Child()}Button('修改children可见').onClick(()=>{this.showChildren = !this.showChildren})}}
}
@Component
struct Child {@State title: string = 'Children';aboutToDisappear() {console.info('Child aboutToDisappear')}aboutToAppear() {console.info('Child aboutToAppear')}build() {Text(this.title).fontSize(50).onClick(() => {this.title = 'Children Changed';})}
}
页面初始化结束后

在这里插入图片描述

可以看到的是,我们定义text变量时赋值的‘111’在aboutToAppear中已经被修改为‘222’了,最终渲染出来的就是‘222’;
在这里插入图片描述

从日志中我们可以观察到,aboutToDisappear的执行时机在onPageShow之前。

然后我们点击跳转一下页面(离开页面)

在这里插入图片描述
日志如下在这里插入图片描述
组件并未被销毁,所以没有进入aboutToDisappear,但是因为离开了页面,所以进入了onPageHide。

当我们再次返回index页面(进入页面)

将会再次触发onPageShow,每一次页面显示时都会触发。
在这里插入图片描述

那么当我们点击按钮呢?(创建组件)

在这里插入图片描述

在这里插入图片描述
chidren子组件被渲染了出来,也出发了子组件的aboutToAppear。

再次点击按钮(销毁组件)在这里插入图片描述

在这里插入图片描述
将会触发子组件的销毁进入aboutToDisappear,同时页面上的子组件也消失不见。

总结

          页面显示|

ActivityA:onPageShow
------ 组件生命周期 ------
            |组件将要出现|

CustomComponent:aboutToAppear
            |组件的渲染和交互|用户按下返回按钮|

ActivityA:onBackPress
            |组件将要消失|

CustomComponent:aboutToDisappear
          |页面隐藏|

ActivityA:onPageHide
http://www.lryc.cn/news/408915.html

相关文章:

  • 【iOS】——Block循环引用
  • shell脚本自动化安装启动各种服务
  • Python - 开源库 ReportLab 库合并 CVS 和图像生成 PDF 文档
  • Java编写SIP协议
  • 大型语言模型LLM的核心概念
  • 软件测试---网络基础、HTTP
  • 韩顺平0基础学java——第39天
  • Linux文件恢复
  • 大数据的数据质量有效提升的研究
  • Flink-CDC解析(第47天)
  • 二阶段测试
  • CSP-J模拟赛day1——解析+答案
  • 【PostgreSQL案例】我要查的表没有在执行计划中
  • 《程序猿入职必会(5) · CURD 页面细节规范 》
  • 操作系统面试知识点总结5
  • BigInteger和BigDecimal类
  • 2024最新Uniapp的H5网页版添加谷歌授权验证
  • 学习java第一百四十四天
  • Meta 发布 Llama3.1,一站教你如何推理、微调、部署大模型
  • XSSFWorkbook 和 SXSSFWorkbook 的区别
  • 会议主题:NICE Seminar|神经组合优化方法的大规模泛化研究(南方科技大学王振坤副研究员)
  • 昇思25天学习打卡营第22天|CycleGAN图像风格迁移互换
  • 《Java初阶数据结构》----6.<优先级队列之PriorityQueue底层:堆>
  • Matrix Equation(高斯线性异或消元+bitset优化)
  • 【一图学技术】2.API测试9种方法图解
  • 力扣刷题----42. 接雨水
  • 【论文精读】 | 基于图表示的视频抑郁症识别的两阶段时间建模框架
  • 采集PCM,将base64片段转换为wav音频文件
  • eclipse ui bug
  • 前端获取blob文件格式的两种格式