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

举报
坚果的博客 发表于 2022/07/27 08:27:15 2022/07/27
【摘要】 ArkUI开发框架赋予了组件独有的生命周期方法,这里主要讲两种情况:系统组件生命周期自定义组件的生命周期系统组件生命周期对于系统组件来讲,生命周期方法是 onAppear 和 onDisAppear ,onAppear:组件从组件树上挂载的回调。onDisAppear:组件从组件树上卸载的回到。简单样例如下所示:@Entry @Component struct Index { @Sta...


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框架没有发现类似的实现,cke_5225.png



image.png

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

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

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

日拱一卒,加油!

参考文档

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。