[HarmonyOSNext鸿蒙开发]2.ArkTS声明式开发:页面和自定义组件

@

目录

• 🌟 ArkUI组件生命周期全解析
  • 一、组件与页面的关系
  • 二、生命周期图解（组件的一生）
  • 三、核心生命周期方法
    • 页面级方法（大门守卫的职责）
    • 组件级方法（积木的自我管理）
  • 四、代码示例解析
  • 五、常见操作的生命周期轨迹
  • 六、最佳实践指南
  • 七、生命周期监听技巧（进阶）
  • 八、情景模拟测试

🌟 ArkUI组件生命周期全解析

一、组件与页面的关系

1. 自定义组件
   👉 就像乐高积木块，用@Component装饰的UI单元

   • 可以重复使用（比如按钮、卡片模板）
   • 能组合多个系统组件（如Text + Image）
   • 示例：@Component struct MyButton { ... }

2. 页面
   👉 像是由积木搭建的房子，用@Entry标记入口

   • 必须且只能有一个主入口（类似大门）
   • 包含多个组件构成完整界面
   • 示例：@Entry struct HomePage { ... }

---

二、生命周期图解（组件的一生）

（示意图说明：从创建到销毁的全过程）

---

三、核心生命周期方法

页面级方法（大门守卫的职责）

方法名	触发场景	典型用途
onPageShow	页面显示（首次打开/切回前台）	加载数据、启动动画
onPageHide	页面隐藏（切到后台/跳转页面）	暂停视频、保存临时数据
onBackPress	点击返回按钮	弹窗确认是否退出

组件级方法（积木的自我管理）

方法名	触发时机	注意事项
aboutToAppear	组件创建后，显示前	初始化非UI数据
onDidBuild	组件首次渲染完成	适合数据埋点、性能统计
aboutToDisappear	组件被移除前	禁止修改状态变量

---

四、代码示例解析

// 父页面组件
@Entry
@Component
struct ParentPage {
  @State showChild: boolean = true;

  // 页面显示时触发（类似APP启动）
  onPageShow() {
    console.log('客厅灯亮了');
  }

  // 组件准备就绪时
  aboutToAppear() {
    console.log('家具搬进来了');
  }

  build() {
    Column() {
      if (this.showChild) {
        ChildComponent() // 子组件创建时会触发自己的aboutToAppear
      }
      Button('移除子组件')
        .onClick(() => {
          this.showChild = false; // 触发子组件的aboutToDisappear
        })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  // 组件即将消失时
  aboutToDisappear() {
    console.log('小部件被收进抽屉');
  }
  
  build() {
    Text('我是可拆卸部件')
  }
}

---

五、常见操作的生命周期轨迹

1. 冷启动应用
   父组件aboutToAppear → 父组件build → 子组件aboutToAppear → 子组件build → onPageShow

2. 删除子组件
   点击按钮 → 子组件aboutToDisappear → 父组件重新渲染

3. 页面跳转

   • pushUrl：当前页onPageHide，新页执行初始化流程
   • replaceUrl：当前页会被销毁，触发aboutToDisappear

4. 应用退到后台
   onPageHide触发 → 重新打开时触发onPageShow

---

六、最佳实践指南

1. 初始化操作

   • 网络请求 → 放在aboutToAppear
   • 动画启动 → 放在onPageShow

2. 清理操作

   • 取消定时器 → aboutToDisappear
   • 释放资源 → onPageHide

3. 避免的坑
   ❌ 不要在aboutToDisappear里改状态变量（会导致不稳定）
   ❌ 避免在onDidBuild做耗时操作（影响渲染性能）

---

七、生命周期监听技巧（进阶）

// 在任意组件监听页面状态
@Component
struct MyComponent {
  aboutToAppear() {
    // 注册监听
    uiObserver.on('routerPageUpdate', (info) => {
      if (info.state === '显示') {
        console.log('监听到页面显示了！');
      }
    });
  }
}

小贴士：这种监听方式就像在房间里装感应器，能知道大门何时开闭

---

八、情景模拟测试

场景：购物车页面

• 进入时onPageShow加载商品数据
• 添加商品时子组件执行aboutToAppear
• 删除商品时子组件触发aboutToDisappear
• 切到后台onPageHide保存未结算商品
• 返回按钮onBackPress提示"还有未支付商品"

---

学习路径建议：
先掌握基础生命周期 → 通过调试console观察调用顺序 → 尝试复杂组件嵌套 → 最后实践状态管理