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

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

页面和组件

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

组件生命周期

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

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

页面生命周期

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

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

onBackPress:当用户点击返回按钮时触发,仅@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理。

代码示例

bash 复制代码
// 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
相关推荐
嘉陵妹妹8 分钟前
深度优先算法学习
学习·算法·深度优先
乖乖是干饭王1 小时前
Linux系统编程中的_GNU_SOURCE宏
linux·运维·c语言·学习·gnu
待什么青丝2 小时前
【TMS570LC4357】之相关驱动开发学习记录2
c语言·arm开发·驱动开发·单片机·学习
行云流水剑2 小时前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf
龙儿筝3 小时前
ArkUI-X与Android桥接通信之消息通信
harmonyos
陈奕昆3 小时前
5.1 HarmonyOS NEXT系统级性能调优:内核调度、I/O优化与多线程管理实战
华为·harmonyos
虾球xz3 小时前
CppCon 2015 学习:CLANG/C2 for Windows
开发语言·c++·windows·学习
androidstarjack3 小时前
如何评价华为最新长焦专利技术?能否颠覆手机长焦摄影的目前限制?
华为·智能手机
蓝婷儿4 小时前
6个月Python学习计划 Day 17 - 继承、多态与魔术方法
开发语言·python·学习
持续前进的奋斗鸭4 小时前
Postman测试学习(1)
学习·postman