当前位置：网站首页>ArkUI开发框架组件的生命周期详解

ArkUI开发框架组件的生命周期详解

2022-07-18 00:33:00 【InfoQ】



ArkUI开发框架赋予了组件独有的生命周期方法，这里主要讲两种情况：

  • 系统组件生命周期
  • 自定义组件的生命周期

对于系统组件来讲，生命周期方法是 
onAppear
 和 
onDisAppear
 ，

  • onAppear
    ：组件从组件树上挂载的回调。
  • onDisAppear
    ：组件从组件树上卸载的回到。

简单样例如下所示：

@Entry @Component struct Index {
 
 @State textShow: boolean = false; // 默认状态

 build() {
 Column() {
 Column() {
 if (this.textShow) {
 Text('挂载/卸载')
 .fontSize(22)
 .onAppear(() => {
 console.log("哈哈，我被挂载了")
 })
 .onDisAppear(() => {
 console.log("呜呜，我被卸载了")
 })
 }
 }
 .width('100%')
 .height(60)

 Button(this.textShow ? "卸载" : "挂载")
 .stateStyles({
 pressed: {
 .backgroundColor(Color.Pink) // 设置点击时的样式
 }
 })
 .onClick(() => { // 依次挂载卸载Text组件
 this.textShow = !this.textShow;
 })
 }
 .width('100%')
 .height('100%')
 }
}

自定义组件的生命周期。

  • 组件的生命周期
  • 使用 
    @Component
     修饰的组件，ArkUI开发框架会自动为其赋予私有的生命周期方法 
    aboutToAppear()
     和 
    aboutToDisappear()
     ，它们用于通知开发者该自定义组件的生命周的变更。
  • aboutToAppear
    ：函数在创建自定义组件的新实例后，在执行其 
    build()
     函数之前执行。允许在该函数中改变状态变量，更改将在后续执行 
    build()
     函数中生效。
  • aboutToDisappear
    ：函数在自定义组件析构消耗之前执行。不允许在该函数中改变状态变量，特别是 
    @Link
     变量的修改可能会导致应用程序行为不稳定。
  • 页面的生命周期
  • 页面本质上也是一个组件，只是页面对于组件来讲多了一个修饰符 
    @Entry
    ，该修饰符表示当前组件是一个页面，它需要在 
    config.json
     中做配置，页面除了具有组件的生命周期外，它还有自己独有的生命周期方法：
  • onPageShow
    ：页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅 
    @Entry
     修饰的自定义组件生效。
  • onPageHide
    ：页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅 
    @Entry
     修饰的自定义组件生效。
  • onBackPress：当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。该方法返回boolean类型的值，说明如下：
  • 返回 
    true
     表示页面自己处理返回逻辑, 不进行页面路由。
  • 返回 
    false
     表示使用默认的返回逻辑。
  • 不返回值会作为 
    false
     处理。

组件生命周期制作表格对比说明如下：
null


注意的一点，允许在生命周期函数中使用 
Promise
 和异步回调函数，比如网络资源获取，定时器设置等；不允许在生命周期函数中使用 
async await
 。
原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://xie.infoq.cn/article/656c759a5b0aee572b0320e07

边栏推荐

猜你喜欢

随机推荐