组件

  • 组件是 OpenHarmony 页面最小显示单元
  • 为了让系统知道这是一个组件，需要使用 @Component 修饰符和 struct 关键字修饰
  • 自定义组件禁止添加构造函数
  • 必须实现 build()方法，该方法满足 Builder 构造器接口定义，用于定义组件的声明式 UI 描述
  • 在组件创建或者组件内 @State 修饰的变量更新时系统都会自动调用 build() 方法刷新UI

系统组件生命周期

onAppear()
onDisAppear()

自定义组件生命周期

@Component 修饰的组件，ArkUI开发框架会自动为其赋予私有的生命周期方法 aboutToAppear() 和 aboutToDisappear() ，它们用于通知开发者该自定义组件的生命周的变更

//函数在创建自定义组件的新实例后，在执行其 build() 函数之前执行
//允许在该函数中改变状态变量，更改将在后续执行 build() 函数中生效
aboutToAppear()
//函数在自定义组件析构消耗之前执行
//不允许在该函数中改变状态变量，特别是 @Link 变量的修改可能会导致应用程序行为不稳定
aboutToDisappear()

自定义组件有如下特点：

  • 可组合：允许开发人员组合使用内置组件和其他组件，以及公共属性和方法。
  • 可重用：可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用；
  • 有生命周期：生命周期的回调方法可以在组件中配置，用于业务逻辑处理；
  • 数据驱动更新：可以由状态数据驱动，实现UI自动更新。

页面的生命周期

  • 页面本质上也是一个组件，只是页面对于组件来讲多了一个修饰符 @Entry(表示当前组件是一个页面，需要在main_page.json中做配置)
  • 除了具有组件的生命周期外，它还有自己独有的生命周期方法
//页面显示时触发一次，包括路由过程、应用进入前后台等场景
//仅 @Entry 修饰的自定义组件生效
onPageShow()
//页面消失时触发一次，包括路由过程、应用进入前后台等场景
//仅 @Entry 修饰的自定义组件生效
onPageHide()
//当用户点击返回按钮时触发
//仅 @Entry 修饰的自定义组件生效
//返回 true 表示页面自己处理返回逻辑, 不进行页面路由
//返回 false 表示使用默认的返回逻辑
//不返回值会作为 false 处理
onBackPress()

系统组件、自定义组件、页面的对比

函数名 描述
onAppear(仅系统组件有) 组件从组件树上挂载的回调
onDisAppear(仅系统组件有) 系统组件独有的方法，组件从组件树上卸载的回调
aboutToReuse 组件复用时回调
aboutToAppear 1. 函数创建自定义组件的新实例后，在执行其 build() 函数之前执行一次
2. 允许在该函数中改变状态变量，更改将在后续执行 build() 函数中生效
aboutToDisappear 1. 函数在自定义组件析构消耗之前执行
2. 不允许在该函数中改变状态变量，特别是 @Link 变量的修改可能会导致应用程序行为不稳定
onPageShow(仅带@Entry的自定义组件有) 页面显示时触发该回调，包括路由过程、应用进入前后台等场景
onPageHide(仅带@Entry的自定义组件有) 页面消失时触发该回调，包括路由过程、应用进入前后台等场景
onBackPress(仅带@Entry的自定义组件有) 当用户点击返回按钮时触发，该方法返回 boolean 类型
true：表示页面自己处理返回逻辑, 不进行页面路由
false：表示使用默认的返回逻辑。不返回值会作为 false 处理
  • 上面的回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数
  • 允许在生命周期函数中使用 Promise 和异步回调函数，比如网络资源获取，定时器设置等
  • 不允许在生命周期函数中使用 async await

具体页面构建过程

页面首次生成

  1. index.ets源码编译为目标文件(含创建UI的指令流)
  2. 生成Component树(C++层面的UI描述层)
  3. 进一步根据Component树生成Element树(Element是Component实例)
  4. 为每个Element创建对应RenderNode
  5. 渲染并绘制界面
  • Element表示具体组件结点，形成Element树维持界面运行时的树形结构，更新局部变化
  • RenderNode负责每个结点显示，形成Render树维持渲染界面需要的信息

数据更新后的页面渲染过程

  1. @State修饰的变量发生变更，触发对应的getter/setter方法
  2. 状态管理模块定位对应的UI组件
  3. 状态管理模块更新对应的Element树
  4. 状态管理模块更新对应的RenderNode
  5. 渲染并绘制界面

UIAbility生命周期

演示方法

//EntryAbility中保持原样

//在父组件
import { hilog } from '@kit.PerformanceAnalysisKit';
aboutToAppear(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Father aboutToAppear');
}
aboutToDisappear(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Father aboutToDisappear');
}
  onPageShow(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Father onPageShow');
  }
  onPageHide(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Father onPageHide');
  }
//子组件
import { hilog } from '@kit.PerformanceAnalysisKit';
aboutToAppear(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Child aboutToAppear');
}
aboutToDisappear(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Child aboutToDisappear');
}
  onPageShow(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Child onPageShow');
  }
  onPageHide(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Child onPageHide');
  }

实例演示(用testTage过滤log信息)

  1. 创建
    Ability onCreate -> Ability onWindowStageCreate -> Ability onForeground -> Succeeded in loading the content.

    -> Father aboutToAppear -> Child aboutToAppear -> Father onPageShow
    (组件：父到子，Ability：外到内)
  2. 退到后台
    Ability onBackground -> Father onPageHide
  3. 返回前台
    Ability onForeground
  4. 销毁
    Father aboutToDisappear -> Child aboutToDisappear -> Ability onWindowStageDestroy -> Ability onDestroy
    (组件：父到子，Ability：内到外)

实例演示