第5章：数据驱动UI

生命周期

5.3.1 生命周期概述

ArkTS组件的生命周期是指组件从创建到销毁的整个过程，每个阶段都有对应的回调方法。理解生命周期有助于：

• 在合适的时机初始化数据
• 管理资源（如网络请求、定时器）
• 优化性能（避免不必要的渲染）

5.3.2 核心生命周期方法

以下是ArkTS组件的主要生命周期阶段：

1. 创建阶段

   • aboutToAppear(): 组件即将显示时触发，适合初始化非UI相关数据
   • onPageShow(): 页面显示时触发（仅Page组件）

2. 更新阶段

   • aboutToUpdate(): 状态变量变化导致组件即将重新渲染前触发
   • onPageHide(): 页面隐藏时触发（仅Page组件）

3. 销毁阶段

   • aboutToDisappear(): 组件即将销毁时触发，用于释放资源
   • onBackPress(): 返回按钮事件拦截（仅Page组件）

5.3.3 生命周期流程图

graph TD
    A[创建] --> B[aboutToAppear]
    B --> C[onPageShow]
    C --> D[运行状态]
    D -->|状态变化| E[aboutToUpdate]
    E --> D
    D -->|页面隐藏| F[onPageHide]
    F -->|重新显示| C
    D -->|销毁| G[aboutToDisappear]

5.3.4 最佳实践

1. 资源管理示例

@Component
struct TimerComponent {
  private timer: number = 0

  aboutToAppear() {
    this.timer = setInterval(() => {
      console.log('Timer tick')
    }, 1000)
  }

  aboutToDisappear() {
    clearInterval(this.timer) // 必须手动清除
  }
}

2. 性能优化技巧

• 避免在aboutToUpdate中执行耗时操作
• 使用@State装饰器控制重渲染范围
• 页面跳转时通过onPageHide暂停动画/视频

5.3.5 常见问题

Q: 为什么我的组件没有触发aboutToDisappear？
A: 检查是否使用了条件渲染（if/else），被移除的组件不会触发该回调

Q: 如何区分首次渲染和更新渲染？
A: 通过aboutToUpdate的params参数判断是否为首次渲染：

aboutToUpdate(params: Record<string, unknown>) {
  if (!params['firstUpdate']) {
    // 非首次渲染逻辑
  }
}

扩展阅读：对于复杂场景，建议结合@Watch装饰器实现细粒度的状态监听。