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

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

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

函数名	描述
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框架中就没有办法了呢？其实你可以试试这样！

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

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

日拱一卒，加油！

参考文档

• 自定义组件生命周期回调函数