鸿蒙应用开发UI基础第二十一节：自定义组件与页面的生命周期

【学习目标】理解生命周期的核心概念区分自定义组件生命周期和页面生命周期的本质差异掌握核心生命周期方法明确各方法的触发时机及使用规范掌握自定义组件/页面的完整生命周期流程理解嵌套组件的生命周期调用时序能在正确的生命周期阶段执行对应操作初始化、资源清理、数据请求等规避内存泄漏等问题结合实战示例理解生命周期在实际开发中的应用场景。一、生命周期核心概念1.1 什么是生命周期页面/组件的生命周期是指用Component/ComponentV2装饰的自定义组件从创建、渲染、更新到销毁的整个阶段每个阶段都有明确的触发时机和核心职责。简单来说生命周期规定了「组件/页面在什么时间该做什么事」遵循生命周期规范能避免无效操作、内存泄漏、数据不一致等问题。1.2 生命周期分类自定义组件通用生命周期包含aboutToAppear、onDidBuild、aboutToDisappear仅需Component/ComponentV2装饰器即可生效所有自定义组件通用其中onDidBuild仅在首次渲染时触发后续组件重新渲染不再执行。页面专属生命周期在自定义组件生命周期基础上新增onPageShow、onPageHide需Entry Component装饰器配合使用仅在根页面生效赋予页面前后台切换能力。二、工程目录结构本节示例基于鸿蒙 API12 Stage 模型工程核心目录结构如下仅展示关键文件LifeCycleDemo/ ├── AppScope/ │ └── app.json5 // 应用全局配置 ├── entry/ │ ├── src/ │ │ ├── main/ │ │ │ ├── ets/ │ │ │ │ ├── entryability/ │ │ │ │ │ └── EntryAbility.ets // 应用入口能力 │ │ │ │ ├── components/ // 自定义组件目录 │ │ │ │ │ └── LifeCycleDemoComponent.ets // 自定义组件示例 │ │ │ │ ├── pages/ // 页面目录 │ │ │ │ │ ├── Index.ets // 首页跳转NextPage │ │ │ │ │ ├── NextPage.ets // 第二层页面 │ │ │ │ │ └── OtherPage.ets // 第三层页面 │ │ │ ├── resources/ // 资源目录图片、字符串等 │ │ │ └── module.json5 // 模块配置 │ │ └── oh-package.json5 // 依赖配置 │ └── build-profile.json5 // 构建配置 └── hvigorfile.ts // 构建脚本三、核心生命周期方法详解3.1 自定义组件核心生命周期方法名触发时机核心作用禁止操作aboutToAppear组件实例创建完成后、build()执行前初始化组件数据修改State、绑定变量、发起首屏页面数据异步请求执行同步耗时操作阻塞渲染onDidBuild组件首次渲染build()完成后埋点上报、获取组件尺寸等轻量无UI影响操作修改响应式状态变量触发二次渲染、耗时操作aboutToDisappear组件销毁前清理资源清除定时器、取消网络请求、解绑监听修改状态变量、使用async/await阻碍垃圾回收3.2 页面专属生命周期仅Entry Component生效方法名触发时机核心作用注意事项onPageShow页面显示时首次进入/切回前台/路由返回恢复数据、刷新非关键请求、启动动画需做防抖处理避免频繁触发onPageHide页面隐藏时跳转页面/切后台暂停操作定时器/媒体、保存临时状态避免不必要耗时操作优先轻量处理3.3 自定义组件生命周期流程框架创建组件实例初始化成员变量定义顺序执行aboutToAppear执行build仅解析结构不渲染子组件执行onDidBuild仅首次渲染组件销毁前执行aboutToDisappear四、自定义组件生命周期示例// entry/src/main/ets/components/LifeCycleDemoComponent.etsimport{hilog}fromkit.PerformanceAnalysisKit;Componentexportstruct LifeCycleDemoComponent{// 响应式状态变量Statecount:number0;privatetimerId:number|nullnull;// 1. 组件即将渲染aboutToAppear(){hilog.info(0x0000,testTag,[子组件] LifeCycleDemoComponent: aboutToAppear);// 允许修改状态变量this.count10;}// 2. 组件首次渲染build完成后触发仅执行一次onDidBuild(){hilog.info(0x0000,testTag,[子组件] LifeCycleDemoComponent: onDidBuild);// 轻量 UI 操作如获取组件尺寸禁止修改状态很少用到}// 3. 组件即将销毁aboutToDisappear(){hilog.info(0x0000,testTag,[子组件] LifeCycleDemoComponent: aboutToDisappear);// 彻底清理资源防止内存泄漏if(this.timerId){clearInterval(this.timerId);this.timerIdnull;}hilog.info(0x0000,testTag,[子组件] 销毁前count值%{public}d,this.count);// 禁止修改状态变量、使用async/await、新增异步操作}// 页面特有生命周期在子组件中实现不会执行onPageShow():void{hilog.info(0x0000,testTag,[子组件] 组件已经显示不会执行);}onPageHide():void{hilog.info(0x0000,testTag,[子组件] 组件已经隐藏不会执行);}build(){Column({space:10}){Text(自定义组件计数${this.count}).fontSize(20).fontColor(#333);Button(启动定时器子组件).onClick((){// 事件回调中允许启动异步资源this.timerIdsetInterval((){this.count;hilog.info(0x0000,testTag,[子组件] 定时器更新count%{public}d,this.count);},1000);}).margin({top:10});Button(重置计数).onClick((){this.count0;}).margin({top:10});}.padding(20).backgroundColor(#f5f5f5).borderRadius(12);}}五、页面生命周期示例5.1 首页Index.ets跳转NextPage// entry/src/main/ets/pages/Index.etsimport{router}fromkit.ArkUI;import{hilog}fromkit.PerformanceAnalysisKit;EntryComponentstruct Index{build(){Column({space:20}){Text(生命周期演示首页).fontSize(24).fontWeight(FontWeight.Bold);Text(点击按钮跳转到 NextPage查看控制台日志).fontSize(16).fontColor(#666);Button(跳转到 NextPage).onClick((){router.pushUrl({url:pages/NextPage}).catch((err:BusinessError){hilog.error(0x0000,testTag,[首页] 跳转失败%{public}s,err.message);});}).backgroundColor(#007dff).fontColor(Color.White).margin({top:10});}.width(100%).height(100%).justifyContent(FlexAlign.Center);}}5.2 第二层页面NextPage.ets// entry/src/main/ets/pages/NextPage.etsimport{router}fromkit.ArkUI;import{hilog}fromkit.PerformanceAnalysisKit;import{LifeCycleDemoComponent}from../components/LifeCycleDemoComponent;EntryComponentstruct NextPage{StateshowChild:booleantrue;// 控制子组件显示/隐藏privatepageTimerId:number|nullnull;// 组件通用生命周期 aboutToAppear(){hilog.info(0x0000,testTag,[页面] NextPage: aboutToAppear);}onDidBuild(){hilog.info(0x0000,testTag,[页面] NextPage: onDidBuild);// 页面首次渲染build完成后执行仅一次//【关键】父组件onDidBuild执行完成后子组件才会触发aboutToAppear懒展开}aboutToDisappear(){hilog.info(0x0000,testTag,[页面] NextPage: aboutToDisappear);// 最终清理页面级资源if(this.pageTimerId){clearInterval(this.pageTimerId);this.pageTimerIdnull;}}// 页面特有生命周期核心演示onPageHide/onPageShow onPageShow(){hilog.info(0x0000,testTag,[页面] NextPage: onPageShow);// 启动页面级定时器演示用this.pageTimerIdsetInterval((){hilog.info(0x0000,testTag,[页面] NextPage 定时器运行中...);},2000);}onPageHide(){hilog.info(0x0000,testTag,[页面] NextPage: onPageHide);// 暂停页面级定时器核心跳转OtherPage时触发if(this.pageTimerId){clearInterval(this.pageTimerId);this.pageTimerIdnull;}}build(){Column({space:20}){Text(NextPage第二层页面).fontSize(24).fontWeight(FontWeight.Bold);Text(跳转OtherPage会触发onPageHide返回会触发onPageShow).fontSize(16).fontColor(#666);// 控制子组件显示/隐藏Button(this.showChild?隐藏子组件:显示子组件).margin(10).backgroundColor(#FF007DFF).onClick((){this.showChild!this.showChild;});if(this.showChild){LifeCycleDemoComponent();}// 跳转第三层页面OtherPageButton(跳转到 OtherPage第三层).onClick((){router.pushUrl({url:pages/OtherPage}).catch((err:BusinessError){hilog.error(0x0000,testTag,[NextPage] 跳转失败%{public}s,err.message);});}).backgroundColor(#FF9900).fontColor(Color.White).margin({top:10});// 返回首页Button(返回首页).onClick((){router.back()}).backgroundColor(#666).fontColor(Color.White).margin({top:10});}.width(100%).height(100%).justifyContent(FlexAlign.Center).padding(20);}}5.3 第三层页面OtherPage.ets// entry/src/main/ets/pages/OtherPage.etsimport{router}fromkit.ArkUI;import{hilog}fromkit.PerformanceAnalysisKit;EntryComponentstruct OtherPage{// 组件通用生命周期 aboutToAppear(){hilog.info(0x0000,testTag,[页面] OtherPage: aboutToAppear);}onDidBuild(){hilog.info(0x0000,testTag,[页面] OtherPage: onDidBuild);}aboutToDisappear(){hilog.info(0x0000,testTag,[页面] OtherPage: aboutToDisappear);}// 页面特有生命周期 onPageShow(){hilog.info(0x0000,testTag,[页面] OtherPage: onPageShow);}onPageHide(){hilog.info(0x0000,testTag,[页面] OtherPage: onPageHide);}build(){Column({space:20}){Text(OtherPage第三层页面).fontSize(24).fontWeight(FontWeight.Bold);Button(返回 NextPage第二层).onClick((){router.back()}).backgroundColor(#007dff).fontColor(Color.White).margin({top:10});}.width(100%).height(100%).justifyContent(FlexAlign.Center).padding(20);}}六、生命周期日志与核心时序验证Index页面未添加生命周期回调仅打印其他页面的生命周期日志过滤无关内容。6.1 首页点击「跳转到 NextPage」[页面] NextPage: aboutToAppear // 父组件aboutToAppear执行 [页面] NextPage: onDidBuild // 父组件onDidBuild执行懒展开执行完后子组件才启动 [子组件] LifeCycleDemoComponent: aboutToAppear // 子组件aboutToAppear执行 [子组件] LifeCycleDemoComponent: onDidBuild // 子组件onDidBuild执行 [页面] NextPage: onPageShow // 父页面onPageShow所有子组件渲染完成后触发核心结论懒展开特性应用冷启动下嵌套组件初始化流程父组件 aboutToAppear → 父组件 build → 父组件 onDidBuild → 子组件 aboutToAppear → 子组件 build → 子组件 onDidBuild → 父组件 onPageShow父组件执行onDidBuild后子组件才触发aboutToAppear是鸿蒙自定义组件的懒展开/懒渲染特性懒展开核心价值提升首屏性能父组件优先完成基础渲染子组件延迟初始化避免首屏阻塞。6.2 NextPage点击「隐藏子组件」[子组件] LifeCycleDemoComponent: aboutToDisappear6.3 NextPage点击「显示子组件」[子组件] LifeCycleDemoComponent: aboutToAppear [子组件] LifeCycleDemoComponent: onDidBuild说明if/else控制组件显示/隐藏并非“视觉隐藏”而是从组件树中新增/删除组件因此会触发完整的生命周期。6.4 NextPage点击「跳转到 OtherPage第三层」[页面] OtherPage: aboutToAppear [页面] OtherPage: onDidBuild [页面] NextPage: onPageHide [页面] OtherPage: onPageShow6.5 点击「返回 NextPage第二层」[页面] OtherPage: onPageHide [页面] NextPage: onPageShow [页面] OtherPage: aboutToDisappear6.6 NextPage点击「返回首页」[页面] NextPage: onPageHide [页面] NextPage: aboutToDisappear [子组件] LifeCycleDemoComponent: aboutToDisappear6.7 内存资源占用演示真机设备操作步骤注释NextPage的aboutToDisappear和onPageHide中定时器清理代码// if (this.pageTimerId) {// clearInterval(this.pageTimerId);// this.pageTimerId null;// }重复操作首页→NextPage之间多次切换观察内存通过Profiler工具查看内存持续上涨无释放恢复清理代码后重复操作内存占用稳定定时器被正常释放。未清理定时器清理定时器七、常见错误与解决方案错误1子组件实现页面专属生命周期方法问题表现子组件中定义onPageShow/onPageHide运行后无日志输出方法完全不生效解决方案仅在Entry Component装饰的根页面实现onPageShow/onPageHide子组件仅保留通用生命周期aboutToAppear/onDidBuild/aboutToDisappear。错误2aboutToAppear执行同步耗时操作问题表现同步阻塞操作如大数据解析、复杂计算导致首屏渲染卡顿、页面启动超时解决方案将耗时操作拆分为异步任务setTimeout/Promise避免阻塞渲染非首屏关键操作延后至onPageShow或用户交互事件中执行错误3aboutToDisappear中执行异步操作或修改状态问题表现组件销毁流程阻塞、垃圾回收失败内存泄漏或触发二次渲染导致页面闪屏解决方案aboutToDisappear仅保留同步清理逻辑如clearInterval/clearTimeout、取消网络请求需异步清理的操作提前在onPageHide中执行禁止修改任何响应式状态变量如Link会导致程序不稳定。错误4资源未清理问题表现页面销毁后定时器仍运行、网络请求仍发送日志持续输出内存占用持续上涨解决方案将定时器ID、请求控制器等存入组件私有变量在aboutToDisappear中强制清理资源如clearInterval/取消请求确保100%释放。八、仓库代码工程名称LifeCycleDemo仓库地址https://gitee.com/HarmonyOS-UI-Basics/harmony-os-ui-basics.git九、下节预告下一节我们将学习ArkTS 全局状态存储LocalStorage/AppStorage/PersistentStorage掌握 LocalStorage页面级和 AppStorage应用级的核心用法结合生命周期实现全局状态的初始化、更新与清理掌握 PersistentStorage 基础持久化解决应用重启数据丢失问题实战实现跨页面数据共享与持久化规避数据不一致问题。