生命周期
鸿蒙(ArkUI)的组件生命周期是指组件从创建到销毁的整个过程,通过生命周期回调函数可以监听组件状态变化并执行相应逻辑。鸿蒙的生命周期分为组件生命周期和页面生命周期(针对@Entry装饰的页面组件),以下是详细汇总:
一、组件生命周期(适用于所有@Component装饰的组件)
组件生命周期主要关注组件自身的创建、渲染、更新和销毁过程,核心回调函数如下:
1. aboutToAppear()
- 作用:组件即将显示时触发,用于初始化数据(如初始化变量、订阅事件)。
- 执行时机:在组件的
build()方法调用之前执行,且仅执行一次。 - 示例:
@Component
struct MyComponent {
private data: string = '';
aboutToAppear() {
this.data = '初始化数据'; // 初始化组件数据
console.log('组件即将显示');
}
build() {
Text(this.data)
}
} - 注意点:
- 不能在该方法中调用
this访问组件的UI属性(如this.width),因为此时UI尚未构建。 - 适合执行耗时较短的初始化操作(避免阻塞UI渲染)。
- 不能在该方法中调用
2. aboutToDisappear()
- 作用:组件即将销毁时触发,用于清理资源(如取消事件订阅、释放定时器)。
- 执行时机:在组件从UI树中移除之前执行,仅执行一次。
- 示例:
@Component
struct TimerComponent {
private timer: number = 0;
aboutToAppear() {
this.timer = setInterval(() => {
console.log('定时器运行中...');
}, 1000);
}
aboutToDisappear() {
clearInterval(this.timer); // 清理定时器,避免内存泄漏
console.log('组件即将销毁');
}
build() {
Text('定时器组件')
}
} - 注意点:
- 必须在此处清理所有外部资源(如定时器、网络请求、事件监听),否则可能导致内存泄漏。
二、页面生命周期(仅适用于@Entry装饰的页面组件)
@Entry装饰的组件代表应用的页面,除了组件生命周期外,还拥有页面级别的生命周期,用于处理页面切换、可见性变化等场景:
1. onPageShow()
- 作用:页面显示时触发(包括首次加载和从后台返回前台)。
- 执行时机:在
aboutToAppear()之后,或页面从后台切换到前台时。 - 示例:
@Entry
@Component
struct HomePage {
onPageShow() {
console.log('页面已显示(可能是首次加载或从后台返回)');
// 可用于刷新页面数据(如从后台返回时重新请求数据)
}
build() {
Text('首页')
}
}
2. onPageHide()
- 作用:页面隐藏时触发(如切换到其他页面或应用进入后台)。
- 执行时机:页面被隐藏前(如导航到其他页面时)。
- 示例:
@Entry
@Component
struct HomePage {
onPageHide() {
console.log('页面已隐藏');
// 可用于保存页面状态(如暂停视频播放、保存表单草稿)
}
build() {
Text('首页')
}
}
3. onBackPress()
- 作用:监听页面返回事件(如用户点击物理返回键或导航栏返回按钮)。
- 执行时机:返回事件触发时,先于页面销毁执行。
- 返回值:
boolean类型,true表示拦截返回事件(不关闭页面),false表示允许返回(默认)。 - 示例:
@Entry
@Component
struct EditPage {
hasUnsavedData: boolean = true; // 假设存在未保存数据
onBackPress() {
if (this.hasUnsavedData) {
// 弹出确认对话框,拦截返回事件
AlertDialog.show({
message: '有未保存的数据,确定返回吗?',
confirm: {
action: () => {
this.hasUnsavedData = false;
router.back(); // 手动返回
}
}
});
return true; // 拦截默认返回行为
}
return false; // 允许返回
}
build() {
Text('编辑页面')
}
}
三、生命周期执行顺序(以页面组件为例)
-
首次加载页面:
aboutToAppear()→build()→onPageShow() -
页面切换到后台:
onPageHide() -
页面从后台返回前台:
onPageShow() -
页面销毁(如导航离开):
onBackPress()(若触发) →onPageHide()→aboutToDisappear()
四、注意事项
-
避免在生命周期中执行耗时操作:
aboutToAppear()、onPageShow()等方法会阻塞UI渲染,耗时操作(如下载大文件)应放在异步任务中。 -
父子组件生命周期关系:
- 父组件
aboutToAppear()→ 子组件aboutToAppear()→ 子组件build()→ 父组件build() - 父组件
aboutToDisappear()→ 子组件aboutToDisappear()(销毁时先子后父)。
- 父组件
-
页面与普通组件的区别:
- 只有
@Entry装饰的组件才会触发onPageShow()、onPageHide()、onBackPress()。 - 普通组件(仅
@Component)只触发aboutToAppear()和aboutToDisappear()。
- 只有
-
数据初始化的最佳位置:
初始化组件内部状态(如@State变量)应放在aboutToAppear()中,而非构造函数(ArkTS组件通常不手动定义构造函数)。
五、应用生命周期(针对整个应用)
应用生命周期关注应用从启动到退出的全过程,通过AbilityStage或EntryAbility中的回调函数实现(不同API版本略有差异,以最新API 10+为例)。
1. onCreate()
- 作用:应用初始化时触发,用于初始化全局资源(如配置全局变量、初始化数据库)。
- 执行时机:应用首次启动时调用,仅执行一次。
- 示例(在
EntryAbility中):import Ability from '@ohos.app.ability.Ability';
export default class EntryAbility extends Ability {
onCreate(want, launchParam) {
console.log('应用初始化');
// 初始化全局状态管理或数据库连接
}
}
2. onWindowStageCreate()
- 作用:应用窗口创建时触发,用于加载页面(如启动首页)。
- 执行时机:在
onCreate()之后,应用UI窗口准备就绪时调用。 - 示例:
onWindowStageCreate(windowStage) {
console.log('窗口创建完成');
windowStage.loadContent('pages/Index', (err, data) => {
// 加载首页页面
});
}
3. onDestroy()
- 作用:应用销毁时触发,用于释放全局资源(如关闭数据库连接、清理缓存)。
- 执行时机:应用被彻底关闭(如用户手动结束进程)时调用。
4. onForeground() / onBackground()
- 作用:监听应用切换到前台/后台的状态。
- 执行时机:
onForeground():应用从后台切换到前台时(如用户从多任务界面切回)。onBackground():应用从前台切换到后台时(如用户按Home键)。
六、其他特殊场景的生命周期相关回调
1. onDestroy()(组件级,低版本兼容)
- 在早期API版本(如API 8及以下)中,部分文档提到
onDestroy()作为组件销毁的回调,但在最新ArkTS语法中,已被aboutToDisappear()替代。当前主流版本(API 9+)中,组件销毁统一使用aboutToDisappear(),onDestroy()仅在兼容旧代码时可能出现。
2. onLayout()(布局相关回调)
- 作用:监听组件布局尺寸变化,用于动态调整UI(如根据组件宽高计算子组件位置)。
- 执行时机:组件布局完成后触发,每次布局更新(如尺寸变化)时都会调用。
- 示例:
@Component
struct MyComponent {
onLayout(size: Size) {
console.log(`组件宽:${size.width},高:${size.height}`);
}
build() {
Text('动态布局')
.onLayout((size) => this.onLayout(size))
}
} - 注意:这不是严格意义上的“生命周期”,但属于组件状态变化的重要回调,常被归类到广义的生命周期管理中。
七、总结:完整生命周期体系
鸿蒙的生命周期按范围可分为三级:
- 应用生命周期(
EntryAbility中):onCreate→onWindowStageCreate→onForeground→onBackground→onDestroy - 页面生命周期(
@Entry组件):aboutToAppear→build→onPageShow→onPageHide→onBackPress→aboutToDisappear - 组件生命周期(普通
@Component):aboutToAppear→build→aboutToDisappear
如果有特定版本或场景的生命周期疑问(如低版本API差异),可以进一步补充说明,我会针对性解答~