鸿蒙自定义组件内自定义构建函数

baidu_247438612024-01-29 18:21

参数传递规则

自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：

参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
在自定义构建函数内部，不允许改变参数值。如果需要改变参数值，且同步回调用点，建议使用@Link。
@Builder内UI语法遵循UI语法规则

（1）按引用传递参数

按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

TypeScript 复制代码

@Builder function test($$: { paramA1: string }) {
  Row() {
    Text(`UseStateVarByReference: ${$$.paramA1} `)
      .margin(30)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      Divider()
      // 在Parent组件中调用test的时候，将this.label引用传递给test
      test({ paramA1: this.label })
      Button('Click me').onClick(() => {
        // 点击"Click me"后，UI从"Hello"刷新为"ArkUI"
        this.label = 'ArkUI';
      })
    }
  }
}

（2）按值传递参数

调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候，推荐使用按引用传递。

TypeScript 复制代码

@Builder function test(paramA1: string) {
  Row() {
    Text(`UseStateVarByReference: ${paramA1} `)
      .margin(30)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      Divider()
      // 在Parent组件中调用test的时候，将this.label引用传递给test
      test(this.label)
      Button('Click me').onClick(() => {
        // 点击"Click me"后，UI不会从"Hello"刷新为"ArkUI"
        this.label = 'ArkUI';
      })
    }
  }
}

就算一直点击按钮，也不会看到对应的组件发生变化，说明按照值传递不会引起@Builder方法内的UI刷新。