HarmonyOS 鸿蒙Next组件生命周期函数有哪些如何使用？生命周期管理指南

1. 页面生命周期（@Entry组件）

arkts

[@Entry](/user/Entry)
@Component
struct PageLifecycle {
  @State message: string = ''

  // 1. 组件创建时调用（最先执行）
  aboutToAppear(): void {
    console.info('aboutToAppear: 组件即将出现')
    // 适合：初始化数据、网络请求、订阅事件
    this.loadData()
  }

  // 2. 页面显示时调用
  onPageShow(): void {
    console.info('onPageShow: 页面显示')
    // 适合：恢复定时器、刷新数据
  }

  // 3. 页面隐藏时调用
  onPageHide(): void {
    console.info('onPageHide: 页面隐藏')
    // 适合：暂停定时器、保存状态
  }

  // 4. 返回按钮点击时调用
  onBackPress(): boolean {
    console.info('onBackPress: 返回按钮被点击')
    // 返回true表示自己处理，不执行默认返回
    // 返回false表示执行默认返回行为
    return false
  }

  // 5. 组件销毁时调用（最后执行）
  aboutToDisappear(): void {
    console.info('aboutToDisappear: 组件即将销毁')
    // 适合：清理定时器、取消订阅、释放资源
  }

  async loadData(): Promise<void> {
    // 加载数据
  }

  build() {
    Column() {
      Text(this.message)
    }
  }
}

2. 普通组件生命周期

arkts

@Component
struct ChildComponent {
  @Prop title: string = ''

  // 组件创建时
  aboutToAppear(): void {
    console.info('子组件 aboutToAppear')
  }

  // 组件销毁时
  aboutToDisappear(): void {
    console.info('子组件 aboutToDisappear')
  }

  // 注意：普通组件没有 onPageShow/onPageHide

  build() {
    Text(this.title)
  }
}

3. 生命周期执行顺序

页面进入：
1. aboutToAppear (父组件)
2. aboutToAppear (子组件)
3. build (渲染)
4. onPageShow

页面离开：
1. onPageHide
2. aboutToDisappear (子组件)
3. aboutToDisappear (父组件)

4. 常见使用场景

arkts

[@Entry](/user/Entry)
@Component
struct ExamplePage {
  private timer: number = -1

  aboutToAppear(): void {
    // ✅ 初始化数据
    this.initData()
    // ✅ 网络请求
    this.fetchData()
    // ✅ 注册监听
    this.registerListener()
  }

  onPageShow(): void {
    // ✅ 启动定时器
    this.timer = setInterval(() => {
      this.refreshData()
    }, 5000)
  }

  onPageHide(): void {
    // ✅ 暂停定时器
    if (this.timer !== -1) {
      clearInterval(this.timer)
    }
  }

  aboutToDisappear(): void {
    // ✅ 清理定时器
    if (this.timer !== -1) {
      clearInterval(this.timer)
    }
    // ✅ 取消订阅
    this.unregisterListener()
    // ✅ 释放资源
    this.releaseResources()
  }

  onBackPress(): boolean {
    // ✅ 拦截返回，显示确认弹窗
    if (this.hasUnsavedChanges) {
      this.showExitConfirm()
      return true // 阻止默认返回
    }
    return false // 执行默认返回
  }
}