写点什么

HarmonyOS NEXT ArkUI 生命周期终极指南 | 组件与页面的关系

作者:Turing_010
  • 2025-05-27
    广东
  • 本文字数:1611 字

    阅读完需:约 5 分钟

HarmonyOS NEXT ArkUI生命周期终极指南 | 组件与页面的关系

HarmonyOS NEXT ArkUI 生命周期终极指南 | 组件与页面的关系

🔥 附超全场景案例+隐藏技巧+避坑秘籍,看完秒变生命周期管理大师!



🚀 组件 vs 页面:傻傻分不清楚?



🌊 生命周期全景图

📍 页面级三大王牌(仅 @Entry 组件可用)

🔹 onPageShow:页面亮相时触发(路由跳转/应用回到前台)🔹 ​​onPageHide​​:页面隐身时触发(路由跳转/应用退到后台)🔹 ​​onBackPress​​:点击返回键时触发(return true 可拦截返回)

📍 组件级三阶段(所有 @Component 组件都有)

aboutToAppear() {}    // 🎬 组件出生前执行(build前的准备阶段)onDidBuild() {}       // 🏗️ build完成后执行(适合埋点/非UI操作)aboutToDisappear() {} // 💔 组件销毁前执行(最后的告别仪式)
复制代码



🎬 生命周期全流程演绎

🔥 组件诞生记

  1. 创建实例:ArkUI 框架召唤组件

  2. 变量初始化:按定义顺序设置初始值

  3. aboutToAppear:组件出生前的"胎教"阶段

  4. 首次 build 渲染:绘制 UI+创建子组件

  5. onDidBuild:组件出生后的"满月酒"

💫 组件重生记(状态变量变化时)

  1. 状态变量/Storage 数据变化

  2. 框架自动标记需更新的组件

  3. 精准最小化更新(API9+超智能模式)

💔 组件销毁记

  1. aboutToDisappear 触发告别

  2. 解除与父组件的所有绑定

  3. 被 JS 虚拟机回收(⚠️ 慎用异步操作会阻碍回收)



🎯 实战代码全解析

🌈 基础版生命周期调用

// 📍 页面入口组件@Entry @Componentstruct MyComponent {  onPageShow() { console.log('🎉 页面亮相啦~') }  // 专属页面技能
aboutToAppear() { console.log('👶 组件准备出生') } onDidBuild() { console.log('🍼 组件构建完成') }
build() { Column() { Button('点我送走小弟') .onClick(() => { this.showChild = false }) } }}
// 📍 子组件演示销毁流程@Componentstruct Child { aboutToDisappear() { console.log('💔 小弟即将消失') }}
复制代码

🔥 高阶版无感监听页面生命周期

// 📍 任意组件都能监听页面生命周期!@Componentstruct AnyComponent {  aboutToAppear() {    // 🎧 监听页面变化事件    this.getUIContext().getUIObserver()      .on('routerPageUpdate', (info) => {        if(info.state === 0) console.log('🕶️ 监听到页面隐身啦~')      })  }}
复制代码



⚠️ 十大避坑指南

  1. aboutToDisappear 中禁止修改状态变量(特别是 @Link)

  2. onDidBuild 不要做 UI 操作(会引发不稳定渲染)

  3. 组件销毁前清理事件监听(防止内存泄漏)

  4. 慎用 router.replaceUrl(会直接销毁当前页面)

  5. 页面跳转时:

  6. pushUrl → 触发 onPageHide

  7. replaceUrl → 触发 onPageHide + 组件销毁

  8. 返回按钮处理:onBackPress 返回 true 可定制返回逻辑

  9. 冷启动流程:父组件 aboutToAppear → build → 子组件 aboutToAppear

  10. 数组操作要先 filter 后 sort(避免污染原数组)

  11. 不要在 build 里写 console.log(用 onDidBuild 代替)

  12. 组件命名避开系统组件名(比如不能叫 Text)



💡 神奇技巧

🎩 用生命周期实现「页面停留统计」

@Entry@Componentstruct AnalyticsPage {  private startTime: number = 0;
onPageShow() { this.startTime = new Date().getTime(); // 📅 记录进入时间 }
onPageHide() { const duration = new Date().getTime() - this.startTime; reportAnalytics('页面停留时长', duration); // 📊 上报数据 }}
复制代码

🪄 用 onBackPress 实现「双击退出」

@Entry@Componentstruct DoubleBackExit {  @State backCount: number = 0;
onBackPress() { if(this.backCount === 0) { this.backCount++; prompt.showToast({ message: '再按一次退出' }); setTimeout(() => { this.backCount = 0 }, 2000); return true; // 🔒 拦截返回 } return false; // 🚪 放行退出 }}
复制代码




🌈 终极总结:掌握生命周期 = 掌控组件生死轮回 + 精准控制 UI 更新记住三大阶段(出生→生存→销毁)+ 两大类型(页面/组件)现在就去 ArkUI 里实践这些酷炫的生命周期玩法吧! 🚀

用户头像

Turing_010

关注

还未添加个人签名 2025-05-22 加入

还未添加个人简介

评论

发布
暂无评论
HarmonyOS NEXT ArkUI生命周期终极指南 | 组件与页面的关系_Turing_010_InfoQ写作社区