页面和自定义组件生命周期

  • 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。

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

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

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。

  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。

  •  onBackPress:当用户点击返回按钮时触发。

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

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行,可以修改状态变量

  • onDidBuild:组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。

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

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

  1. 自定义组件的创建:自定义组件的实例由ArkUI框架创建。

  2. 初始化自定义组件的成员变量:通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量,初始化顺序为成员变量的定义顺序。

  3. 如果组件中包含子组件,创建过程则是页面的aboutToAppear -> 子组件的AboutToAppear(包含build),之后才是页面的是钩子函数执行 ->  onPageShow。

  4. 在首次渲染的时候,执行build方法渲染系统组件,如果子组件为自定义组件,则创建自定义组件的实例。在首次渲染的过程中,框架会记录状态变量和组件的映射关系,当状态变量改变时,驱动其相关的组件刷新。

  5. 如果开发者定义了onDidBuild,则执行onDidBuild方法。

自定义组件重新渲染

当事件句柄被触发(比如设置了点击事件,即触发点击事件)改变了状态变量时,或者LocalStorage / AppStorage中的属性更改,并导致绑定的状态变量更改其值时:

  1. 框架观察到了变化,将启动重新渲染。

  2. 根据框架持有的两个map(自定义组件的创建和渲染流程中第4步),框架可以知道该状态变量管理了哪些UI组件,以及这些UI组件对应的更新函数。执行这些UI组件的更新函数,实现最小化更新。

  • 18
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app自定义组件生命周期是基于Vue的生命周期来实现的。在uni-app中,自定义组件生命周期包括以下几个阶段: 1. created:组件实例被创建后触发的钩子函数。在这个阶段,可以对组件的初始数据进行设置和初始化操作。 2. beforeMount:在组件挂载之前触发的钩子函数。在这个阶段,可以进行一些准备工作,但此时组件还没有被渲染到页面上。 3. mounted:组件挂载到页面之后触发的钩子函数。在这个阶段,可以进行一些与页面交互的操作,例如请求数据、绑定事件等。 4. updated:组件更新后触发的钩子函数。在这个阶段,可以对组件进行重新渲染或更新数据等操作。 5. beforeDestroy:在组件销毁之前触发的钩子函数。在这个阶段,可以进行一些清理工作,例如解绑事件、取消订阅等。 6. destroyed:组件销毁之后触发的钩子函数。在这个阶段,组件的实例已经被销毁,不再可用。 需要注意的是,uni-app自定义组件生命周期中,并不能确定子组件被全部挂载,如果需要子组件完全挂载之后再执行操作,可以使用Vue官方提供的$nextTick方法。通过$nextTick方法,可以在下一次DOM更新循环结束之后执行特定的操作,确保子组件的挂载完成。 综上所述,uni-app自定义组件生命周期包括created、beforeMount、mounted、updated、beforeDestroy和destroyed等阶段。在这些阶段中,可以根据实际需求进行相应的操作和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值