鸿蒙-页面和自定义组件的生命周期

你眼中的光
437 阅读3分钟

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

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

image.png

页面生命周期

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

组件生命周期

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

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

  1. 自定义组件的创建：自定义组件的实例由ArkUI框架创建。
  2. 初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
  3. 如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
  4. 在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在首次渲染的过程中，框架会记录状态变量和组件的映射关系，当状态变量改变时，驱动其相关的组件刷新。
  5. 如果开发者定义了onDidBuild，则执行onDidBuild方法。

自定义组件的删除

  1. 在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，前端节点已经没有引用时，将被JS虚拟机垃圾回收。
  2. 自定义组件和它的变量将被删除，如果其有同步的变量，比如@Link、@Prop、@StorageLink，将从同步源上取消注册。

不建议在生命周期aboutToDisappear内使用async await，自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。

组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。

自定义组件监听页面生命周期

listener: (info: observer.RouterPageInfo) => void = (info: observer.RouterPageInfo) => {
    let routerInfo: observer.RouterPageInfo | undefined = this.queryRouterPageInfo();
    if (info.pageId == routerInfo?.pageId) {
        if (info.state == observer.RouterPageState.ON_PAGE_SHOW) {
            console.log(`Index onPageShow`);
         } else if (info.state == observer.RouterPageState.ON_PAGE_HIDE) {
            console.log(`Index onPageHide`);
         }
     }
 }
 
aboutToAppear(): void {
    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
    uiObserver.on('routerPageUpdate', this.listener);
}
aboutToDisappear(): void {
    let uiObserver: UIObserver = this.getUIContext().getUIObserver();
    uiObserver.off('routerPageUpdate', this.listener);
}
  • RouterPageInfo
名称类型必填说明
contextUIAbilityContext | UIContext是触发生命周期的routerPage页面对应的上下文信息。
indexnumber是触发生命周期的routerPage在栈中的位置。
namestring是触发生命周期的routerPage页面的名称。
pathstring是触发生命周期的routerPage页面的路径。
stateRouterPageState是触发生命周期的routerPage页面的状态。
pageId12+string是触发生命周期的routerPage页面的唯一标识。
avatar
文章
阅读
粉丝