HarmonyOS页面和自定义组件生命周期
- 自定义组件:
@Component
装饰的UI
单元,可以组合多个系统组件实现UI
的复用,可以调用组件的生命周期。 - 页面:即应用的
UI
页面。可以由一个或者多个自定义组件组成,@Entry
装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry
。只有被@Entry
装饰的组件才可以调用页面的生命周期。
页面生命周期,即被@Entry
装饰的组件生命周期,提供以下生命周期接口:
onPageShow:
页面每次显示时触发一次,包括路由过程、应用进入前台等场景。onPageHide:
页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。onBackPress:
当用户点击返回按钮时触发。
组件生命周期,即一般用@Component
装饰的自定义组件的生命周期,提供以下生命周期接口:
aboutToAppear:
组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()
函数之前执行。onDidBuild:
组件build()
函数执行完成之后回调该接口,不建议在onDidBuild
函数中更改状态变量、使用animateTo
等功能,这可能会导致不稳定的UI
表现。aboutToDisappear
aboutToDisappear
函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear
函数中改变状态变量,特别是@Link
变量的修改可能会导致应用程序行为不稳定。
生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。
根据上面的流程图,我们从自定义组件的初始创建、重新渲染和删除来详细解释。
自定义组件的创建和渲染流程
- 自定义组件的创建:自定义组件的实例由
ArkUI
框架创建。 - 初始化自定义组件的成员变量:通过本地默认值或者构造方法传递参数来初始化自定义组件的 成员变量,初始化顺序为成员变量的定义顺序。
- 如果开发者定义了
aboutToAppear
,则执行aboutToAppear
方法。 - 在首次渲染的时候,执行
build
方法渲染系统组件,如果子组件为自定义组件,则创建自定义组件的实例。在首次渲染的过程中,框架会记录状态变量和组件的映射关系,当状态变量改变时,驱动其相关的组件刷新。 - 如果开发者定义了
onDidBuild
,则执行onDidBuild
方法。
自定义组件重新渲染
当事件句柄被触发(比如设置了点击事件,即触发点击事件)改变了状态变量时,或者LocalStorage / AppStorage
中的属性更改,并导致绑定的状态变量更改其值时:
- 框架观察到了变化,将启动重新渲染。
- 根据框架持有的两个map,框架可以知道该状态变量管理了哪些UI组件,以及这些UI组件对应的更新函数。执行这些UI组件的更新函数,实现最小化更新。
自定义组件的删除
如果if
组件的分支改变,或者ForEach
循环渲染中数组的个数改变,组件将被删除:
- 在删除组件之前,将调用其
aboutToDisappear
生命周期函数,标记着该节点将要被销毁。ArkUI
的节点删除机制是:后端节点直接从组件树上摘下,后端节点被销毁,对前端节点解引用,前端节点已经没有引用时,将被JS
虚拟机垃圾回收。 - 自定义组件和它的变量将被删除,如果其有同步的变量,比如
@Link、@Prop、@StorageLink
,将从同步源上取消注册。
不建议在生命周期aboutToDisappear内使用async await,如果在生命周期的aboutToDisappear使用异步操作(Promise或者回调方法),自定义组件将被保留在Promise的闭包中,直到回调方法被执行完,这个行为阻止了自定义组件的垃圾回收。