美文网首页ArkTS/ArkUI实战零基础学鸿蒙编程1024
47、鸿蒙/页面和自定义组件生命周期

47、鸿蒙/页面和自定义组件生命周期

作者: 圆梦人生 | 来源:发表于2024-08-08 10:54 被阅读0次

在开始之前,我们先明确自定义组件和页面的关系:

  • 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。
  • 页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
  • onBackPress:当用户点击返回按钮时触发。

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • onDidBuild:组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。
  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。

生命周期.png

相关文章

  • 微信小程序自定义组件传值问题

    微信小程序自定义组件传值问题 自定义组件 · 小程序 父组件(引用组件的页面模板)页面 子组件页面 表示父组件页面...

  • Flutter 页面生命周期

    Flutter 页面生命周期就是 Flutter 页面组件 Widget 的生命周期。 Flutter 有两种组件...

  • 微信小程序生命周期

    1.小程序的生命周期 2.页面的生命周期 3.组件的生命周期 4.组件所在页面的生命周期

  • 调用自定义组件中的方法

    创建自定义组件 .json .js 页面中引入自定义组件 .json .xml 页面中调用自定义组件的方法 .js

  • 微信小程序自定义组件

    步骤 创建自定义组件 在页面中使用组件 页面和组件之间的传值 项目结构及实现后效果 1、 新建自定义compone...

  • 小程序的自定义组件

    小程序允许我们使用自定义组件的方式来构建页面。 自定义组件 1. 创建自定义组件 类似于页面,一个自定义组件由 j...

  • 小程序2

    自定义组件 定义组件 在.json中"component":true, 在页面中使用组件 页面的.json 在页面...

  • uni-app微信小程序开发 - 生命周期

    uni-app的生命周期分为应用生命周期和页面生命周期还有组件生命周期。 应用生命周期[https://uniap...

  • 微信小程序的组件及分包

    自定义组件 定义组件 页面的.json 在页面中使用组件 页面的json 2.在页面中使用 组件的参数传递 父传子...

  • 自定义vue组件

    (1) 自定义组件dialog.vue (2) 页面调用 (3) 弹窗效果展示 拓展:vue自定义组件点击页面其他...

网友评论

    本文标题:47、鸿蒙/页面和自定义组件生命周期

    本文链接:https://www.haomeiwen.com/subject/bcpahjtx.html