ArkUI中的自定义组件(二)自定义组件的生命周期

目录

前言

一、自定义组件的生命周期

1.aboutToAppear

2.onDidBuild

3.aboutToDisappear

4.示例代码

二、自定义组件的创建和渲染流程

三、自定义组件重新渲染

四、自定义组件的删除

五、自定义组件的嵌套使用和示例

1.嵌套组件的生命周期

2.嵌套组件的删除​​​​​

3.总结

六、参考文档

前言

        上一篇文章介绍下ArkUI中的自定义组件，这篇博客主要介绍下自定义组件额生命周期和渲染流程。

一、自定义组件的生命周期

        自定义组件生命周期，即用@Component或@ComponentV2装饰的自定义组件的生命周期，提供以下生命周期接口：

        图1.自定义组件的生命周期函数

        这里主要有三个函数：

1.aboutToAppear

        组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build函数之前执行。

2.onDidBuild

        在组件首次渲染触发的build函数执行完成之后回调该接口，后续组件重新渲染将不回调该接口。开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。

3.aboutToDisappear

        aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

4.示例代码

        我们可以通过下面的实例代码验证自定义组件的生命周期函数。

@ComponentV2
struct HelloComponent{
@Param message:string = ""

aboutToAppear(): void {
console.log("HelloComponent组件 aboutToAppear called")
}
onDidBuild(): void {
console.log("HelloComponent组件 onDidBuild called")
}
aboutToDisappear(): void {
console.log("HelloComponent组件 aboutToDisappear called")
}
build() {
Text(this.message)
.width(230)
.height(40)
.backgroundColor('#ffeae5e5')
.borderRadius(20)
.textAlign(TextAlign.Center)
}
}

@Entry
@Component
struct PrivateBuilderPage {

build() {
NavDestination() {
Column() {
HelloComponent({message:"自定义组件"})
}
.height('100%')
.width('100%')
}.title("UI状态范式管理(v2)")
}
}

        上面的示例中，我们自定义一个组件HelloComponent。然后再PrivateBuilderPage中引用该组件。

        当我们进入主页面的时候，控制台打印日志如下：

        图2.进入页面的生命周期函数控制台打印日志

        当我们离开当前页面的时候，控制台打印日志如下：

        图3.离开页面的时候 ，控制台打印日志

        根据上面的流程图，接下来从自定义组件的初始创建、重新渲染和删除来详细说明。

二、自定义组件的创建和渲染流程

        自定义组件的创建：自定义组件的实例由ArkUI框架创建。

三、自定义组件重新渲染

        当触发事件（比如点击）改变状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：

四、自定义组件的删除

        例如if组件的分支改变或ForEach循环渲染中数组的个数改变，组件将被移除：

        在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，前端节点已经没有引用时，将被Ark虚拟机垃圾回收。

        自定义组件和它的变量将被删除，如果组件有同步的变量（如@Link、@Prop、@StorageLink），将从同步源上取消注册。

        不建议在生命周期aboutToDisappear中使用async await。如果在此生命周期中使用异步操作（如 Promise 或回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法执行完毕，这会阻止自定义组件的垃圾回收。

五、自定义组件的嵌套使用和示例

        在当我们了解了自定义组件的生命周期函数之后，我们通过实例代码来探究下当我们嵌套组件的时候，自定义组件的函数是怎么执行的。

1.嵌套组件的生命周期

        还以上面的代码为例，我们在当前页面加上父组件的生命周期函数。

        代码如下：

import { StartupTask } from "@kit.AbilityKit";

@Builder
export function PrivateBuilder() {
CustomComponentDemosPage()
}

@ComponentV2
struct HelloComponent{
@Param message:string = ""

aboutToAppear(): void {
console.log("HelloComponent组件 aboutToAppear called")
}
onDidBuild(): void {
console.log("HelloComponent组件 onDidBuild called")
}
aboutToDisappear(): void {
console.log("HelloComponent组件 aboutToDisappear called")
}
build() {
Text(this.message)
.width(230)
.height(40)
.backgroundColor('#ffeae5e5')
.borderRadius(20)
.textAlign(TextAlign.Center)
}
}

@Entry
@Component
struct CustomComponentDemosPage {

aboutToAppear(): void {
console.log("ParentComponent组件 aboutToAppear called")
}
onDidBuild(): void {
console.log("ParentComponent组件 onDidBuild called")
}
aboutToDisappear(): void {
console.log("ParentComponent组件 aboutToDisappear called")
}
build() {
NavDestination() {
Column() {
HelloComponent({message:"自定义组件"})
}
.height('100%')
.width('100%')
}.title("UI状态范式管理(v2)")
}
}

        当我们进入页面，然后返回的时候，控制台打印日志如下：

图3.嵌套组件的控制台打印日志

2.嵌套组件的删除​​​​​

        为了验证上述代码中删除自定义嵌套组件的生命周期函数，我们修改下UI。

        我们新增一个按钮和变量，用来删除自定义组件。

        当我们删除按钮的时候，控制台打印日志如下：

图3.删除组件的控制台打印函数

3.总结

        根据上面的打印的日志，我们可以用下面的一张图来表示嵌套组件的生命周期函数的执行过程。

图5.嵌套组件的生命周期函数（官网图）

六、参考文档

        自定义组件生命周期