了解@Builder装饰器会让你在做组件拆分的时候事半功倍 原创

🎯 了解@Builder装饰器会让你在做组件拆分的时候事半功倍

⭐⭐⭐

1. 了解使用事项 ⚠️
– 可以页面局部/全局

– 不涉及组件状态变量变化，建议使用全局的自定义构建函数

– 建议通过this访问组件的状态变量，而不是通过参数传递

– 一般构造简单且重复的ui结构

– 当传入一个参数且该参数直接传入对象 “字面量” = {}这种 时，才会按引用传递，其他传递方式均为按值传递 ❗

– 可以嵌套使用如果需要刷新ui的话然后又是参数传递的情况需要引用传递或者直接修改绑定的装饰器

– 如果要想刷新就只有直接绑定装饰器 或者 使用字面量 将每个想传递的参数铺开传递才可以刷新UI ❗❗❗

2. v1状态管理大致分为以下使用

@Entry
@Component
struct BuilderCase {
  @State mockName: string = '汉堡黄'
  @State mockUserInfo: mockUserInfo = new mockUserInfo()

  @Builder
  localBuilder() {
    Text(this.mockName)
      .fontSize(30)
  }

  @Builder
  localBindBuilder(param: mockUserInfo) {
    Text(param.name)
      .fontSize(30)
  }

  @Builder
  localClassBuilder() {
    Text(this.mockUserInfo.name)
      .fontSize(30)
      .onClick(() => {
        this.mockUserInfo.name = '鸡肉汉堡'
      })
  }

  @Builder
  nestFatherBuilder(param: mockUserInfo) {
    Text(param.name)
      .fontSize(30)
    this.nestSonBuilder({ name: param.name })
  }

  @Builder
  nestSonBuilder(param: mockUserInfo) {
    Text(param.name)
      .fontSize(30)
  }

  build() {
    Column() {
      // 局部使用
      this.localBuilder()

      // 全局/按值使用
      globalBuilder(this.mockName)

      // 引用传递
      this.localBindBuilder({ name: this.mockName })
      Button('更改类中的名字').onClick((event: ClickEvent) => {
        this.mockName = '鸡肉汉堡'
      })

      // 修改装饰器修饰的变量触发UI刷新
      this.localClassBuilder()

      // 嵌套传递
      this.nestFatherBuilder({ name: this.mockName })
    }
  }
}

@Builder
function globalBuilder(mockName: string) {
  Text(mockName)
    .fontSize(30)

}

class mockUserInfo {
  name: string = '汉堡黄'
}

3. v2状态管理使用

由@ObservedV2和@Trace装饰的类对象实例具备深度观测属性变化的能力。
当调用全局Builder或局部Builder且使用值传递的方式传递参数时，修改@Trace装饰的对象属性可以触发UI刷新。❗❗❗

@ObservedV2
class mockUserInfo {
  @Trace name: string = '汉堡黄'
}

@Entry
@ComponentV2
struct BuilderCase {
  mockInfoData: mockUserInfo = new mockUserInfo()

  @Builder
  localBuilder() {
    Text(this.mockInfoData.name)
  }

  build() {
    Column() {
      this.localBuilder()

      Button('改变汉堡名')
        .onClick(() => {
          this.mockInfoData.name = '秘制小八汉堡'
        })
    }
    .height('100%')
    .width('100%')
  }
}

📝 合理使用组件抽象能力会让页面结构更加清晰、好维护、易扩展

🌸🌼🌺