ArkUI 的页面生命周期详解

网罗开发 （小红书、快手、视频号同名）

大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验 。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。

展菲：您的前沿技术领航员

👋 大家好，我是展菲！

📱 全网搜索"展菲"，即可纵览我在各大平台的知识足迹。

📣 公众号"Swift社区"，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。

💬 微信端添加好友"fzhanfei"，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。

📅 最新动态：2025 年 3 月 17 日

快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！

文章目录

- 引言
- [一、ArkUI 生命周期的本质](#一、ArkUI 生命周期的本质)
- 二、核心生命周期函数
- 三、aboutToAppear：页面初始化
- - 使用场景
  - 示例
  - 注意点
- 四、onPageShow：页面可见
- - 使用场景
  - 示例
  - 对比
- 五、onPageHide：页面进入后台
- - 使用场景
  - 示例
- 六、aboutToDisappear：页面销毁
- - 使用场景
  - 示例
- [七、build：UI 渲染核心](#七、build：UI 渲染核心)
- - 示例
  - 关键理解
- 八、完整生命周期流程
- 九、一个完整示例
- 十、常见错误（非常重要）
- - [1 把刷新逻辑写在 aboutToAppear](#1 把刷新逻辑写在 aboutToAppear)
  - [2 在 build 里写逻辑](#2 在 build 里写逻辑)
  - [3 不清理资源](#3 不清理资源)
- 十一、进阶：结合状态管理
- [十二、AI 场景下的生命周期变化](#十二、AI 场景下的生命周期变化)
- - 传统
  - AI
  - 示例
- 总结
- - [1 初始化用 aboutToAppear](#1 初始化用 aboutToAppear)
  - [2 刷新用 onPageShow](#2 刷新用 onPageShow)
  - [3 UI 更新靠状态驱动](#3 UI 更新靠状态驱动)

引言

很多人刚接触 ArkUI 时，会有一种错觉：

"声明式 UI，不就是写个组件吗？"

但一旦项目变复杂，你很快就会遇到这些问题：

页面什么时候请求数据最合适？
为什么数据更新了 UI 没刷新？
页面返回后状态为什么丢了？
生命周期到底什么时候触发？

这时候你会发现：

不理解 ArkUI 生命周期，很容易写出"看起来能跑，但后期崩溃"的代码。

一、ArkUI 生命周期的本质

在传统 UI（如 iOS / Android）中：

复制代码

生命周期 = 页面状态变化

而在 ArkUI 中：

生命周期 = 状态驱动 UI 的过程节点

也就是说：

复制代码

状态变化 → 生命周期触发 → UI 更新

二、核心生命周期函数

在 ArkUI（ArkTS）中，一个页面组件的核心生命周期主要有这些：

复制代码

aboutToAppear
onPageShow
onPageHide
aboutToDisappear
build（渲染）

三、aboutToAppear：页面初始化

这是最常用的生命周期， 页面即将出现时触发（只触发一次）

使用场景

初始化数据
发起请求
创建对象

示例

ts 复制代码

@Entry
@Component
struct HomePage {

  @State list: string[] = []

  aboutToAppear() {
    this.loadData()
  }

  async loadData() {
    this.list = ["A", "B", "C"]
  }

}

注意点

不要做：

ts 复制代码

// 每次返回都不会再执行
aboutToAppear() {
  this.refreshData()
}

因为它只执行一次！

四、onPageShow：页面可见

页面进入前台时触发（每次都会触发）

使用场景

刷新数据
恢复状态
统计曝光

示例

ts 复制代码

onPageShow() {
  this.refreshData()
}

对比

生命周期	调用次数
aboutToAppear	1 次
onPageShow	多次

五、onPageHide：页面进入后台

页面被遮挡或跳转时触发

使用场景

暂停任务
保存状态
停止动画

示例

ts 复制代码

onPageHide() {
  console.log("页面进入后台")
}

六、aboutToDisappear：页面销毁

页面即将被销毁时触发

使用场景

清理资源
取消订阅
关闭连接

示例

ts 复制代码

aboutToDisappear() {
  this.timer && clearInterval(this.timer)
}

七、build：UI 渲染核心

这是 ArkUI 最重要的一点：

UI 是由 build 函数 + 状态驱动的

示例

ts 复制代码

build() {
  Column() {
    Text("Hello")
    ForEach(this.list, (item) => {
      Text(item)
    })
  }
}

关键理解

build 不是"生命周期函数"，而是：

复制代码

状态变化 → 触发 build → UI 重绘

八、完整生命周期流程

一个典型页面流程：

复制代码

aboutToAppear（初始化）
      ↓
build（渲染）
      ↓
onPageShow（显示）
      ↓
用户操作 / 状态变化
      ↓
build（多次触发）
      ↓
onPageHide（离开）
      ↓
aboutToDisappear（销毁）

九、一个完整示例

ts 复制代码

@Entry
@Component
struct DemoPage {

  @State count: number = 0

  aboutToAppear() {
    console.log("初始化")
  }

  onPageShow() {
    console.log("页面显示")
  }

  onPageHide() {
    console.log("页面隐藏")
  }

  aboutToDisappear() {
    console.log("页面销毁")
  }

  build() {
    Column() {
      Text(`Count: ${this.count}`)

      Button("增加")
        .onClick(() => {
          this.count++
        })
    }
  }

}

十、常见错误（非常重要）

1 把刷新逻辑写在 aboutToAppear

错误：

ts 复制代码

aboutToAppear() {
  this.loadData()
}

返回页面不会刷新。

正确：

ts 复制代码

onPageShow() {
  this.loadData()
}

2 在 build 里写逻辑

错误：

ts 复制代码

build() {
  this.loadData() // 会重复调用！
}

3 不清理资源

错误：

ts 复制代码

aboutToAppear() {
  setInterval(...)
}

内存泄漏。

正确：

ts 复制代码

aboutToDisappear() {
  clearInterval(...)
}

十一、进阶：结合状态管理

ArkUI 的核心是：

复制代码

生命周期 + 状态

例如：

ts 复制代码

@State user: any = null

aboutToAppear() {
  this.user = { name: "Tom" }
}

状态更新后：

复制代码

自动触发 build

十二、AI 场景下的生命周期变化

在 AI 驱动应用中，生命周期的使用会有变化：

传统

复制代码

页面出现 → 请求数据

AI

复制代码

AI 触发 → 更新状态 → UI 刷新

示例

ts 复制代码

aboutToAppear() {
  ai.restoreLastState().then(res => {
    this.data = res
  })
}

总结

理解 ArkUI 生命周期，可以记住三点：

1 初始化用 aboutToAppear

复制代码

只执行一次

2 刷新用 onPageShow

复制代码

每次进入都会执行

3 UI 更新靠状态驱动

复制代码

不要手动刷新 UI

如果用一句话总结：

ArkUI 的生命周期，本质是"状态驱动 UI 的触发时机"。

复制代码

在这里插入代码片