#夏日挑战赛#ArkUI开发框架组件的生命周期 原创 精华

发布于 2022-7-18 12:39
浏览
1收藏

「本文正在参加星光计划3.0–夏日挑战赛」

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

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

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

系统组件生命周期

对于系统组件来讲,生命周期方法是 onAppearonDisAppear

  • 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 处理。

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

函数名 描述
onAppear 系统组件独有的方法,组件从组件树上挂载的回调。
onDisAppear 系统组件独有的方法,组件从组件树上卸载的回到。
aboutToAppear 函数在创建自定义组件的新实例后,在执行其 build() 函数之前执行。允许在该函数中改变状态变量,更改将在后续执行 build() 函数中生效。
aboutToDisappear 函数在自定义组件析构消耗之前执行。不允许在该函数中改变状态变量,特别是 @Link 变量的修改可能会导致应用程序行为不稳定。
onPageShow 页面显示时触发该回调,包括路由过程、应用进入前后台等场景。仅 @Entry 修饰的自定义组件生效。
onPageHide 页面消失时触发该回调,包括路由过程、应用进入前后台等场景。仅 @Entry 修饰的自定义组件生效。
onBackPress 当用户点击返回按钮时触发,该方法返回 boolean 类型,true:表示页面自己处理返回逻辑, 不进行页面路由。false:表示使用默认的返回逻辑。不返回值会作为 false 处理。仅 @Entry 修饰的自定义组件生效。

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

比如我们有这样一个需求,当返回当前页面的时候,需要做一些处理。下面是Flutter中的.then,我看了api,ArkUI框架没有发现类似的实现,#夏日挑战赛#ArkUI开发框架组件的生命周期-开源基础软件社区

#夏日挑战赛#ArkUI开发框架组件的生命周期-开源基础软件社区

是不是在ArkUI框架中就没有办法了呢?其实你可以试试这样!

//生命周期   第一个页面
  onPageShow(){
    console.info('刷新页面...............')
  }

是不是很巧妙的完成了对应的实现呢?

日拱一卒,加油!

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐