组件构成

先上一张图：

image.png

装饰器

用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。@Reusable 即表示其具备组件复用的能力
装饰器汇总：

• @Entry：将结构体标记为页面组件，代表一个完整的页面。
• @Component：将结构体标记为可复用的组件。
• @Preview：让组件能够在开发过程中进行预览。
• @State：用于定义组件内部的响应式状态变量需给初始值
• @Prop：实现父组件到子组件的数据单向传递。可以给初始值也可以不给
• @Link：达成父组件与子组件之间的数据双向传递。不能给初始值
• @Provide/@Consume：跨组件传值，通过提供方和消费方的标记来共享和更新数据。
• @StorageLink/@StorageProp：作用于应用全局的 UI 状态存储，范围更广。
• @LocalStorageLink/@LocalStorageProp：针对页面级别的 UI 状态存储，方便页面间数据共享和更新。必须给初始值
• @Builder：用于创建自定义构建函数，对重复的 UI 元素进行抽象。
• @BuilderParam：引用自定义构建函数，为组件添加特定功能。
• @Styles：定义组件的样式集合。
• @Extend：用于扩展组件的样式或行为，可抽离公共的样式。
• @Require：约束 Prop 和 BuilderParam 的参数必须传递。
• @Track：标记对象中可更新和使用的字段，只有被标记的字段才有效。
• @ObjectLink：配合 Observed 修饰的类，实现子组件对局部组件的更新，且不能用于 Entry 修饰的组件。
• @CustomDialog：自定义弹窗
• @Reusable API10支持 即表示其具备组件复用的能力 （使用需要注意）

1. 根组件：就是被装饰器@Entry装饰的入口组件，这也是自定义组件(父组件)

// 根组件(父组件)
@Entry
@Component
struct FatherComponent {}

2. 子组件：没有被@Entry装饰的自定义组件，只有@Component装饰器(子组件)。
   子组件必须被父组件调用，才能在页面上展示出来，它自己无法展示。
   从API version 11开始，@Component可以接受一个可选的bool类型参数：freezeWhenInactive 冻结组件。
   需要使用export关键字导出使用。

// 子组件
@Component
struct SonComponent {}

基本结构

• @Entry：定义页面入口装饰器
• @Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。
• struct：自定义组件基于struct实现，struct + 自定义组件名
• build()：用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

生命周期

image.png

@Entry装饰的组件的生命周期

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

@Component装饰的自定义组件的生命周期

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

自定义布局

• onMeasureSize(api10)：ArkUI框架会在自定义组件确定尺寸时，将该自定义组件的节点信息和尺寸范围通过onMeasureSize传递给该开发者。不允许在onMeasureSize函数中改变状态变量。组件每次布局时触发，计算子组件的尺寸，其执行时间先于onPlaceChildren。
• onPlaceChildren(api10)：ArkUI框架会在自定义组件布局时，将该自定义组件的子节点自身的尺寸范围通过onPlaceChildren传递给该自定义组件。不允许在onPlaceChildren函数中改变状态变量，组件每次布局时触发，设置子组件的起始位置。

组件开发案例

@Entry修饰器根组件文件

import { Mycomponent1, Mycomponent2 } from '../../component/Mycomponent';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Mycomponent1()
      }.height('50%')
      Row() {
        Mycomponent2()
      }.height('50%')
    }
  }
}

这里是@Component 组件文件 （一般不建议文件中存在两个组件）

@Component
export struct Mycomponent1 {
  @State message: string = '这是组件1';
  build() {
    Column() {
      Row() {
        Text(this.message)
      }
      Row() {
        TextInput({ text: $$this.message })
      }
    }
  }
}

@Component
export struct Mycomponent2 {
  @State message: string = '这是组件2';
  build() {
    Column() {
      Text(this.message)
    }
  }
}

效果

image.png