【HarmonyOS 4.0】UI结构复用

1. @Builder装饰器 自定义构建函数

1. 当页面有多个相同的UI结构时，开发者可以将重复使用的UI元素抽象成一个 @Builder 方法，该方法可在 build() 方法中调用多次，以完成UI结构的复用。
2. @Builder 方法可以定义在组件内或全局。
3. 组件内的 @Builder 方法可通过 this 访问当前组件的属性和方法，而全局的 @Builder 方法则不能。
4. 组件内的 @Builder 方法只能用于当前组件，全局的 @Builder 方法导出（export）后，可用于整个应用。

1.1 组件内自定义构建函数

// 1. 定义语法
@Builder MyBuilderFunction() {}

// 2. 使用语法
this.MyBuilderFunction() {}

全局自定义构建函数

// 1. 定义语法
@Builder export function MyGlobalBuilderFunction() {}

// 2. 使用语法
MyGlobalBuilderFunction() {}

1.2 参数传递规则

1. 按引用传递参数：当只有一个参数且参数为对象字面量时按引用传递，其余情况均为按值传递。
   1.1 按引用传递时，若传递的参数为状态变量，则状态变量的变化将会触发 @Builder 方法内部UI的刷新；按值传递则不会。
2. 按值传递参数
   2.1 当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候，推荐使用按引用传递。

// 按引用传递参数
class obj {
  username: string = ''
}
@Builder function MyBuilder($$: obj) { // 参数需要直接传入对象字面量才会按引用传递该参数，其余传递方式均为按值传递。
  Column() {
    Text(`hello ${$$.username}`)
      .fontSize(18)
      .fontColor(Color.Grey)
  }
}

@Entry
@Component
struct UITest4 {
  @State person_name: string = '花花' // 当传递的参数为状态变量时，状态变量的改变才会引起@Builder方法内的UI刷新
  build() {
    Column() {
      MyBuilder({username: this.person_name})
      Button('点击修改')
        .margin({top: 8})
        .onClick(() => {
          this.person_name = '七喜'
        })
    }
  }
}

1.3 @Builder 方法和自定义组件的区别

1. @Builder 方法和自定义组件虽然都可以使用UI复用的效果，但是俩者还是有着本质的区别，其中最为显著的一个区别就是自定义组件可以定义自己的状态变量，而 @Builder 方法则不能。
2. 若复用的UI结构没有状态，推荐使用 @Builder 方法，否则使用自定义组件。