遥遥领先!HarmonyOS ArkTS页面和自定义组件生命周期

前言

上一篇文章我们介绍了 《遥遥领先! HarmonyOS 自定义组件的结构、函数、变量、参数规定,这篇太干了我要渴死了!!!》 现在我们系统的看看 ArkTS页面和自定义组件生命周期 的实现流程步骤

本篇文章主要是玩玩生命周期,本次主要分成组件生命周期和页面的生命周期

页面的生命周期: 只有被@Entry装饰的组件才可以调用页面的生命周期

自定义组件的生命周期: 只有被@Component装饰的自定义组件的生命周期

banner

生命周期接口

@Entry

• onPageShow：页面每次显示时触发。onPageShow() { console.info('页面渲染完毕..加载'); }
  

  image.png
• onPageHide：页面每次隐藏时触发一次。onPageHide() { this.textColor = Color.Transparent; console.info('生命周期 页面隐藏'); }
  

  2023-12-03 18.20.45.gif
• onBackPress：当用户点击返回按钮时触发。onBackPress() { this.textColor = Color.Red; console.info('生命周期 页面返回'); }
  

  2023-12-03 18.26.05.gif
• aboutToAppear：aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。aboutToAppear() { console.log("组件实例创建完毕..."); }
  

  image.png
  ponent 生命周期,也允许
• aboutToDisappear：在自定义组件即将析构销毁时执行。aboutToDisappear() { console.log("销毁组件"); }生命周期流程图
  

  官方图片
  件句柄被触发（比如设置了点击事件，即触发点击事件）改变了状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：
• 可以搞个子组件然后父组件对其进行 if 判断是否显示
• 框架观察到了变化，将启动重新渲染。
• 根据框架持有的两个map（自定义组件的创建和渲染流程中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。组件的删除如果if组件的分支改变，或者ForEach循环渲染中数组的个数改变，组件将被删除, 也就是说组件如果发生了改变那么就会删除组件,后面重新加载到时候可重新创建. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，当前端节点已经没有引用时，将被JS虚拟机垃圾回收。官方建议: 不建议在生命周期aboutToDisappear内使用async await，如果在生命周期的aboutToDisappear使用异步操作（Promise或者回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。

以下就是生命周期的调用时机了

2023-12-03 19.02.04.gif

// 生命周期讲解
import router from '@ohos.router';
@Entry
@Component
struct LifeCycle {
    @State textColor: Color = Color.Black;
    // 是否显示子组件
    @State showChild: boolean = true;

    onPageShow() {
        this.textColor = Color.Blue;
        console.info('页面渲染完毕..加载');
    }

    onPageHide() {
        this.textColor = Color.Transparent;
        console.info('生命周期 页面隐藏');
    }

    onBackPress() {
        this.textColor = Color.Red;
        console.info('生命周期 页面返回');
    }

    aboutToAppear() {
        console.log("组件实例创建完毕...");
    }

    aboutToDisappear() {
        console.log("销毁组件");
    }

    build() {
        Column() {
            Text('Hello World')
            .fontColor(this.textColor)
            .fontSize(30)
            .margin(30)

            // this.showChild为true，创建Child子组件，执行Child aboutToAppear
            if (this.showChild) {
                Child()
            }
            // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
            Button('创建或者删除子组件').onClick(() => {
                this.showChild = !this.showChild;
            }).height(50).margin(30)
            // 执行onPageHide
            Button('跳转到Face')
            .height(50).margin(30)
            .onClick(() => {
                router.pushUrl({ url: 'pages/Face' });
            })
        }.width('100%')
    }
}


@Component
struct Child {
    @State title: string = '儿子组件';
    // 销毁监听
    aboutToDisappear() {
        console.info('[lifeCycle] 子组件销毁')
    }
    // 加载监听
    aboutToAppear() {
        console.info('[lifeCycle] 子组件加载完毕')
    }

    build() {
        Text(this.title).fontSize(50).onClick(() => {
            this.title = 'Hello ArkUI';
        })
    }
}

上面的案例中,LifeCycle 页面的代码编写了父子组件两个自定义组件,一个是入口一个是子组件

我们在父的 build 当中声明了生命周期,子当中也声明了生命周期,下面是初始化的生命周期启动流程.

1. 应用冷启动的初始化流程为：

父 aboutToAppear --> 父 build --> 子 aboutToAppear --> 子 build --> 子 build执行完毕

--> 父 build执行完毕 --> Index onPageShow。

1. 点击“创建或者删除子组件”，if绑定的this.showChild变成false，删除Child组件，会执行Child aboutToDisappear方法。
2. 点击“跳转其他页面”，调用router.pushUrl接口，跳转到另外一个页面，当前Index页面隐藏，执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口，Index页面被隐藏，并没有销毁，所以只调用onPageHide。跳转到新页面后，执行初始化新页面的生命周期的流程。
3. 如果调用的是router.replaceUrl，则当前Index页面被销毁，执行的生命周期流程将变为：Index onPageHide --> LifeCycle aboutToDisappear --> Child aboutToDisappear。上文已经提到，组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。
4. 点击返回按钮，触发页面生命周期Index onBackPress，且触发返回一个页面后会导致当前Index页面被销毁。
5. 最小化应用或者应用进入后台，触发Index onPageHide。当前Index页面没有被销毁，所以并不会执行组件的aboutToDisappear。应用回到前台，执行Index onPageShow。
6. 退出应用，执行Index onPageHide --> LifeCycle aboutToDisappear --> Child aboutToDisappear。完整的流程演示
   

   2023-12-03 19.02.04.gif

最后

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

img