在开始之前,我们先明确自定义组件和页面的关系:
- 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。
- 页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:
- onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
- onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
- onBackPress:当用户点击返回按钮时触发。
组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:
- aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
- onDidBuild:组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。
- aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。
生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。
以下示例展示了生命周期的调用时机:
// Index.ets
import { router } from '@kit.ArkUI';
@Entry
@Component
struct MyComponent {
@State showChild: boolean = true;
@State btnColor:string = "#FF007DFF";
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageShow() {
console.info('Index onPageShow');
}
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageHide() {
console.info('Index onPageHide');
}
// 只有被@Entry装饰的组件才可以调用页面的生命周期
onBackPress() {
console.info('Index onBackPress');
this.btnColor ="#FFEE0606";
return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理
}
// 组件生命周期
aboutToAppear() {
console.info('MyComponent aboutToAppear');
}
// 组件生命周期
onDidBuild() {
console.info('MyComponent onDidBuild');
}
// 组件生命周期
aboutToDisappear() {
console.info('MyComponent aboutToDisappear');
}
build() {
Column() {
// this.showChild为true,创建Child子组件,执行Child aboutToAppear
if (this.showChild) {
Child()
}
// this.showChild为false,删除Child子组件,执行Child aboutToDisappear
Button('delete Child')
.margin(20)
.backgroundColor(this.btnColor)
.onClick(() => {
this.showChild = false;
})
// push到page页面,执行onPageHide
Button('push to next page')
.onClick(() => {
router.pushUrl({ url: 'pages/page' });
})
}
}
}
@Component
struct Child {
@State title: string = 'Hello World';
// 组件生命周期
aboutToDisappear() {
console.info('[lifeCycle] Child aboutToDisappear');
}
// 组件生命周期
onDidBuild() {
console.info('[lifeCycle] Child onDidBuild');
}
// 组件生命周期
aboutToAppear() {
console.info('[lifeCycle] Child aboutToAppear');
}
build() {
Text(this.title)
.fontSize(50)
.margin(20)
.onClick(() => {
this.title = 'Hello ArkUI';
})
}
}
// page.ets
@Entry
@Component
struct page {
@State textColor: Color = Color.Black;
@State num: number = 0;
onPageShow() {
this.num = 5;
}
onPageHide() {
console.log("page onPageHide");
}
onBackPress() { // 不设置返回值按照false处理
this.textColor = Color.Grey;
this.num = 0;
}
aboutToAppear() {
this.textColor = Color.Blue;
}
build() {
Column() {
Text(`num 的值为:${this.num}`)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(this.textColor)
.margin(20)
.onClick(() => {
this.num += 5;
})
}
.width('100%')
}
}
以上示例中,Index页面包含两个自定义组件,一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;一个是Child,是MyComponent的子组件。只有@Entry装饰的节点才可以使页面级别的生命周期方法生效,因此在MyComponent中声明当前Index页面的页面生命周期函数(onPageShow / onPageHide / onBackPress)。MyComponent和其子组件Child分别声明了各自的组件级别生命周期函数(aboutToAppear / onDidBuild/aboutToDisappear)。
- 应用冷启动的初始化流程为:MyComponent aboutToAppear --> MyComponent build --> MyComponent onDidBuild--> Child aboutToAppear --> Child build --> Child onDidBuild --> Index onPageShow。
- 点击“delete Child”,if绑定的this.showChild变成false,删除Child组件,会执行Child aboutToDisappear方法。
- 点击“push to next page”,调用router.pushUrl接口,跳转到另外一个页面,当前Index页面隐藏,执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口,Index页面被隐藏,并没有销毁,所以只调用onPageHide。跳转到新页面后,执行初始化新页面的生命周期的流程。
- 如果调用的是router.replaceUrl,则当前Index页面被销毁,执行的生命周期流程将变为:Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到,组件的销毁是从组件树上直接摘下子树,所以先调用父组件的aboutToDisappear,再调用子组件的aboutToDisappear,然后执行初始化新页面的生命周期流程。
- 点击返回按钮,触发页面生命周期Index onBackPress,且触发返回一个页面后会导致当前Index页面被销毁。
- 最小化应用或者应用进入后台,触发Index onPageHide。当前Index页面没有被销毁,所以并不会执行组件的aboutToDisappear。应用回到前台,执行Index onPageShow。
- 退出应用,执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。
相关推荐
【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 ) https://hanshuliang.blog.csdn.net/article/details/139424435 博客源码快照 一、ArkTS @Component ...
【鸿蒙Web组件使用示例Demo】是基于HarmonyOS操作系统的一个开发项目,它展示了如何在ArkTS API9版本中利用Stage模式来有效地构建和管理Web组件。HarmonyOS是华为推出的面向全场景的分布式操作系统,旨在提供跨平台...
### HarmonyOS应用开发者高级认证题库解析 #### 一、判断题解析 1. **云函数打包完成后,...- **解析**:在HarmonyOS开发中,自定义组件确实拥有自己的生命周期,这与标准UI组件类似,包括初始化、显示、隐藏等阶段。
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案,涵盖了HarmonyOS应用开发的多个方面,包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
3. **组件生命周期**:每个自定义组件确实有自己的生命周期,包括创建、显示、隐藏和销毁等阶段,开发者可以在特定的生命周期回调中进行相应的操作。 4. **Tabs组件**:Tabs组件用于切换多个内容视图,每个Tab对应...
一、 HarmonyOS 生命周期 * 每一个自定义组件都有自己的生命周期。 * 使用@Component 修饰的自定义组件都支持 onPageShow、onBackPress 和 onPageHide 生命周期函数。 二、 HarmonyOS 组件 * Video 组件可以支持...
3. **自定义组件生命周期**:并非所有使用`@Component`修饰的自定义组件都支持`onPageShow`,`onBackPress`和`onPageHide`生命周期函数。这些函数通常与页面级Ability相关联,而不是组件。 4. **数据存储**:首选项...
7. **自定义组件生命周期**:包括aboutToAppear、aboutToDisappear、onPageShow、onPageHide和onBackPress等函数,用于管理组件在不同阶段的行为。 8. **变量状态管理**:@State和@Link装饰器可用于管理组件内部...
- UIAbility的生命周期包括Create、WindowStageCreate、Foreground、Background、WindowStageDestroy和Destroy这几个阶段,每个阶段对应特定的操作。 - UIAbility的启动模式有multiton、singleton和specified三种...
- **知识点3**:在HarmonyOS中,并非所有使用`@Component`修饰的自定义组件都会自动支持`onPageShow`, `onBackPress` 和 `onPageHide` 这些生命周期回调方法。这些方法主要针对的是页面级别的组件,而非所有自定义...
3. **生命周期管理**:自定义组件有自己的生命周期,如onPageShow、onBackPress和onPageHide等生命周期函数。 **三、服务和函数** 1. **云函数**:需要在AppGallery Connect创建触发器才能在端侧调用。 2. **HUKS...
- **解析**:在HarmonyOS开发中,自定义组件确实拥有自己的生命周期,这与标准UI组件类似,包括初始化、显示、隐藏等阶段。 3. **基于端云一体化开发,开发者需要精通前端、后端不同的开发语言**(错误) - **...
<HarmonyOS第一课>学习路径2.ArkTS开发语言介绍 习题及答案【习题】ArkTS基础知识 及格分85...下面哪些函数是自定义组件的生命周期函数?A. aboutToAppearB. aboutToDisappearC. onPageShowD. onPageHideE. onBackPress
7. **生命周期管理**:了解组件的生命周期对优化性能至关重要,例如在合适的时机释放资源,防止内存泄漏。 8. **多设备适配**:HarmonyOS 的目标是跨平台运行,所以源码会包含如何设计适应不同屏幕尺寸和硬件设备的...
3. **组件生命周期**: - 自定义组件有自己的生命周期,这对于管理组件的状态和行为至关重要。 4. **Tabs组件**: - Tabs组件用于创建多标签页面,每个TabContent组件对应一个页面视图。它仅可包含子组件...
自定义组件生命周期** - **错误判断:** 所有使用`@Component`修饰的自定义组件都支持`onPageShow`、`onBackPress`和`onPageHide`等生命周期方法。 - 并非所有自定义组件都支持这些生命周期方法,具体取决于组件的...
8. 页面生命周期以及页面之间跳转与传参 9. 自定义组件(同时涉及到 Canvas)以及如何调用 10. 数据存储操作,主要涉及 sqlite 数据库存储 11. 代码编程规范、设计模式 实验过程分解与实验目标对应矩阵: | 实验...
在HarmonyOS中,自定义组件如同原生组件一样,有自己的生命周期,例如加载、初始化、显示、隐藏等状态变化。 **9. 所有使用@Component 修饰的自定义组件都支持 onPageShow, onBackPress和 onPageHide 生命周期函数...
- **前端框架层 (Framework)**:负责前端页面解析,提供MVVM开发模式、页面路由和自定义组件等功能。 - **引擎层 (Engine)**:包含动画解析、DOM树构建、布局计算、渲染命令构建与绘制及事件管理等功能。 - **...