【鸿蒙实战开发】HarmonyOS开发深度探索与打造个性化自定义组件

前言

今天分享一下 什么是自定义组件？及其自定义组件的实战。

做过前端或者android开发的都知道自定义组件，鸿蒙中显示在界面上的UI都称为组件，小打一个按钮，再到一个列表。

鸿蒙提供的组件有 基础组件，容器组件，媒体组件，绘制组件，画布组件组件等，如Button、Text 是基础组件。

由开发者在基础组件基础上 添加一些封装和修饰 定义的组件称为自定义组件。自定义组件的实现大大提高代码的可复用性和可维护性，提高代码效率。

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

自定义组件和页面的关系

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

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

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

自定义组件的创建：自定义组件的实例由ArkUI框架创建。

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

如果开发者定义了aboutToAppear，则执行aboutToAppear方法。

在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：

状态变量 -> UI组件（包括ForEach和if）。

UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。

build() {
...
th