子玥酱掘金 / 知乎 / CSDN / 简书 同名大家好我是子玥酱一名长期深耕在一线的前端程序媛 。曾就职于多家知名互联网大厂目前在某国企负责前端软件研发相关工作主要聚焦于业务型系统的工程化建设与长期维护。我持续输出和沉淀前端领域的实战经验日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。技术方向前端 / 跨端 / 小程序 / 移动端工程化内容平台掘金、知乎、CSDN、简书创作特点实战导向、源码拆解、少空谈多落地文章状态长期稳定更新大量原创输出我的内容主要围绕前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读展开。文章不会停留在“API 怎么用”而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍希望能帮你在实际工作中少走弯路。子玥酱 · 前端成长记录官 ✨ 如果你正在做前端或准备长期走前端这条路 关注我第一时间获取前端行业趋势与实践总结 可领取11 类前端进阶学习资源工程化 / 框架 / 跨端 / 面试 / 架构 一起把技术学“明白”也用“到位”持续写作持续进阶。愿我们都能在代码和生活里走得更稳一点 文章目录引言ArkUI 的生命周期设计思路页面生命周期1 aboutToAppear2 aboutToDisappear3 onPageShow4 onPageHide一个完整示例组件生命周期一个常见误区在 build 中写逻辑生命周期 状态更新为什么 ArkUI 生命周期更少总结引言很多开发者在从Android / iOS / Flutter转到ArkUIArkTS时都会问一个问题ArkUI 的生命周期在哪里因为在传统开发中生命周期是非常明确的。例如Android ActivityonCreate onStart onResume onPause onStop onDestroy或者Flutter WidgetinitState didUpdateWidget dispose这些生命周期决定了什么时候初始化数据 什么时候刷新 UI 什么时候释放资源但当你开始写 ArkUI 时会发现一个明显变化生命周期看起来少了很多。这并不是 ArkUI 没有生命周期而是生命周期被重新设计了。理解这一点对写好 ArkUI 应用非常重要。ArkUI 的生命周期设计思路ArkUI 采用的是声明式 UI 状态驱动更新。因此它的核心理念是状态变化 → UI 更新而不是传统模式生命周期 → 手动更新 UI这意味着很多传统生命周期的职责被简化了。例如UI刷新 状态同步 组件更新都由框架自动完成所以 ArkUI 的生命周期通常分为两个层级页面生命周期 组件生命周期页面生命周期在 ArkUI 中页面通常使用Entry Component定义例如EntryComponentstruct HomePage{build(){Text(Home)}}页面主要有几个核心生命周期。1 aboutToAppear这是最常用的生命周期触发时机页面即将显示时。通常用于初始化数据 发起网络请求 加载资源示例EntryComponentstruct HomePage{aboutToAppear(){console.log(页面即将出现)this.loadData()}loadData(){// 请求接口}build(){Column(){Text(Home Page)}}}这是 ArkUI 中最接近传统onCreate / initState的生命周期。2 aboutToDisappear触发时机页面即将消失时。常见用途停止定时器 取消请求 保存数据示例aboutToDisappear(){console.log(页面即将离开)this.stopTimer()}例如privatetimer:number0aboutToAppear(){this.timersetInterval((){console.log(running)},1000)}aboutToDisappear(){clearInterval(this.timer)}这类似传统onDestroy / dispose3 onPageShow触发时机页面进入前台时。例如应用从后台回到前台 页面重新显示示例onPageShow(){console.log(页面显示)}常见用途刷新数据 恢复状态 重新检查权限4 onPageHide触发时机页面进入后台时。例如用户切换应用 页面被覆盖示例onPageHide(){console.log(页面进入后台)}常见用途暂停动画 暂停播放 保存临时状态一个完整示例一个完整的页面生命周期示例EntryComponentstruct HomePage{aboutToAppear(){console.log(aboutToAppear)}onPageShow(){console.log(onPageShow)}onPageHide(){console.log(onPageHide)}aboutToDisappear(){console.log(aboutToDisappear)}build(){Column(){Text(Lifecycle Demo)}}}大致执行顺序通常是aboutToAppear ↓ onPageShow ↓ 页面运行 ↓ onPageHide ↓ aboutToDisappear组件生命周期除了页面组件也有生命周期。例如Componentstruct UserCard{aboutToAppear(){console.log(组件出现)}aboutToDisappear(){console.log(组件销毁)}build(){Text(User Card)}}当组件被创建或移除时这些生命周期会触发。这在动态 UI 中非常有用。例如StateshowCard:booleantrueif(this.showCard){UserCard()}当showCard变为false时aboutToDisappear就会触发。一个常见误区在 build 中写逻辑很多新手会写出这样的代码build(){this.loadData()Column(){Text(Hello)}}这是一个非常危险的写法因为build 可能被调用很多次。例如状态变化 UI刷新 组件更新都会触发 build正确做法是初始化逻辑 → aboutToAppear UI 渲染 → build生命周期 状态更新ArkUI 的一个重要特点是生命周期只负责初始化状态负责更新。例如Statelist:string[][]初始化aboutToAppear(){this.fetchData()}请求数据fetchData(){this.list[A,B,C]}UIForEach(this.list,(item){Text(item)})当list更新时UI自动刷新不需要额外生命周期。为什么 ArkUI 生命周期更少很多开发者刚开始会觉得生命周期太少了。但其实这是设计理念不同传统 UI生命周期驱动 UIArkUI状态驱动 UI生命周期只负责初始化 清理资源而 UI 更新全部交给状态系统这就是声明式 UI 的核心思想。总结ArkUI 的生命周期比传统框架更简洁但依然非常重要。核心生命周期包括aboutToAppear 页面即将出现 onPageShow 页面进入前台 onPageHide 页面进入后台 aboutToDisappear 页面即将销毁组件也有aboutToAppear aboutToDisappear理解 ArkUI 生命周期的关键在于生命周期 → 初始化 / 清理 状态 → UI更新当你掌握这种模式之后就会发现ArkUI 的生命周期虽然少但足够用。真正需要花时间理解的其实不是生命周期本身而是状态驱动 UI 的工作方式。
ArkUI 的页面生命周期详解
子玥酱掘金 / 知乎 / CSDN / 简书 同名大家好我是子玥酱一名长期深耕在一线的前端程序媛 。曾就职于多家知名互联网大厂目前在某国企负责前端软件研发相关工作主要聚焦于业务型系统的工程化建设与长期维护。我持续输出和沉淀前端领域的实战经验日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。技术方向前端 / 跨端 / 小程序 / 移动端工程化内容平台掘金、知乎、CSDN、简书创作特点实战导向、源码拆解、少空谈多落地文章状态长期稳定更新大量原创输出我的内容主要围绕前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读展开。文章不会停留在“API 怎么用”而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍希望能帮你在实际工作中少走弯路。子玥酱 · 前端成长记录官 ✨ 如果你正在做前端或准备长期走前端这条路 关注我第一时间获取前端行业趋势与实践总结 可领取11 类前端进阶学习资源工程化 / 框架 / 跨端 / 面试 / 架构 一起把技术学“明白”也用“到位”持续写作持续进阶。愿我们都能在代码和生活里走得更稳一点 文章目录引言ArkUI 的生命周期设计思路页面生命周期1 aboutToAppear2 aboutToDisappear3 onPageShow4 onPageHide一个完整示例组件生命周期一个常见误区在 build 中写逻辑生命周期 状态更新为什么 ArkUI 生命周期更少总结引言很多开发者在从Android / iOS / Flutter转到ArkUIArkTS时都会问一个问题ArkUI 的生命周期在哪里因为在传统开发中生命周期是非常明确的。例如Android ActivityonCreate onStart onResume onPause onStop onDestroy或者Flutter WidgetinitState didUpdateWidget dispose这些生命周期决定了什么时候初始化数据 什么时候刷新 UI 什么时候释放资源但当你开始写 ArkUI 时会发现一个明显变化生命周期看起来少了很多。这并不是 ArkUI 没有生命周期而是生命周期被重新设计了。理解这一点对写好 ArkUI 应用非常重要。ArkUI 的生命周期设计思路ArkUI 采用的是声明式 UI 状态驱动更新。因此它的核心理念是状态变化 → UI 更新而不是传统模式生命周期 → 手动更新 UI这意味着很多传统生命周期的职责被简化了。例如UI刷新 状态同步 组件更新都由框架自动完成所以 ArkUI 的生命周期通常分为两个层级页面生命周期 组件生命周期页面生命周期在 ArkUI 中页面通常使用Entry Component定义例如EntryComponentstruct HomePage{build(){Text(Home)}}页面主要有几个核心生命周期。1 aboutToAppear这是最常用的生命周期触发时机页面即将显示时。通常用于初始化数据 发起网络请求 加载资源示例EntryComponentstruct HomePage{aboutToAppear(){console.log(页面即将出现)this.loadData()}loadData(){// 请求接口}build(){Column(){Text(Home Page)}}}这是 ArkUI 中最接近传统onCreate / initState的生命周期。2 aboutToDisappear触发时机页面即将消失时。常见用途停止定时器 取消请求 保存数据示例aboutToDisappear(){console.log(页面即将离开)this.stopTimer()}例如privatetimer:number0aboutToAppear(){this.timersetInterval((){console.log(running)},1000)}aboutToDisappear(){clearInterval(this.timer)}这类似传统onDestroy / dispose3 onPageShow触发时机页面进入前台时。例如应用从后台回到前台 页面重新显示示例onPageShow(){console.log(页面显示)}常见用途刷新数据 恢复状态 重新检查权限4 onPageHide触发时机页面进入后台时。例如用户切换应用 页面被覆盖示例onPageHide(){console.log(页面进入后台)}常见用途暂停动画 暂停播放 保存临时状态一个完整示例一个完整的页面生命周期示例EntryComponentstruct HomePage{aboutToAppear(){console.log(aboutToAppear)}onPageShow(){console.log(onPageShow)}onPageHide(){console.log(onPageHide)}aboutToDisappear(){console.log(aboutToDisappear)}build(){Column(){Text(Lifecycle Demo)}}}大致执行顺序通常是aboutToAppear ↓ onPageShow ↓ 页面运行 ↓ onPageHide ↓ aboutToDisappear组件生命周期除了页面组件也有生命周期。例如Componentstruct UserCard{aboutToAppear(){console.log(组件出现)}aboutToDisappear(){console.log(组件销毁)}build(){Text(User Card)}}当组件被创建或移除时这些生命周期会触发。这在动态 UI 中非常有用。例如StateshowCard:booleantrueif(this.showCard){UserCard()}当showCard变为false时aboutToDisappear就会触发。一个常见误区在 build 中写逻辑很多新手会写出这样的代码build(){this.loadData()Column(){Text(Hello)}}这是一个非常危险的写法因为build 可能被调用很多次。例如状态变化 UI刷新 组件更新都会触发 build正确做法是初始化逻辑 → aboutToAppear UI 渲染 → build生命周期 状态更新ArkUI 的一个重要特点是生命周期只负责初始化状态负责更新。例如Statelist:string[][]初始化aboutToAppear(){this.fetchData()}请求数据fetchData(){this.list[A,B,C]}UIForEach(this.list,(item){Text(item)})当list更新时UI自动刷新不需要额外生命周期。为什么 ArkUI 生命周期更少很多开发者刚开始会觉得生命周期太少了。但其实这是设计理念不同传统 UI生命周期驱动 UIArkUI状态驱动 UI生命周期只负责初始化 清理资源而 UI 更新全部交给状态系统这就是声明式 UI 的核心思想。总结ArkUI 的生命周期比传统框架更简洁但依然非常重要。核心生命周期包括aboutToAppear 页面即将出现 onPageShow 页面进入前台 onPageHide 页面进入后台 aboutToDisappear 页面即将销毁组件也有aboutToAppear aboutToDisappear理解 ArkUI 生命周期的关键在于生命周期 → 初始化 / 清理 状态 → UI更新当你掌握这种模式之后就会发现ArkUI 的生命周期虽然少但足够用。真正需要花时间理解的其实不是生命周期本身而是状态驱动 UI 的工作方式。
