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

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

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

自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。

生命周期回调函数定义

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

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

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

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

• onBackPress:当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。

  • 返回true表示页面自己处理返回逻辑, 不进行页面路由。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。

• onMeasure: 框架会在自定义组件确定尺寸时，将该自定义组件的子节点信息和自身的尺寸范围通过onMeasure传递给该自定义组件。不允许在onMeasure函数中改变状态变量。

• onLayout:框架会在自定义组件布局时，将该自定义组件的子节点信息和自身的尺寸范围通过onLayout传递给该自定义组件。不允许在onLayout函数中改变状态变量。

示例

// xxx.ets
@Entry
@Component
struct CountSample {
  @State count: number = 10
  private timerId: number = -1
​
  aboutToAppear(): void {
    this.timerId = setInterval(() => {
      if (this.count <= 1) {
        clearTimeout(this.timerId)
      }
      this.count -= 1
    }, 1000) 
  }
​
  aboutToDisappear(): void {
    if (this.timerId > 0) {
      clearTimeout(this.timerId)
      this.timerId = -1
    }
  }
​
  build() {
    Column() {
      Text("倒计时" + `${this.count} `).fontSize(32)
    }.width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

上述示例表明，生命周期函数对于管理其状态十分重要。

说明：

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