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

参数传递规则

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

  • 参数的类型必须与参数声明的类型一致,不允许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刷新。

相关推荐
长弓三石2 小时前
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
网络·tcp/ip·harmonyos
zhanshuo3 小时前
HarmonyOS 隐私安全机制实战:动态权限、沙箱隔离与分布式授权
harmonyos
zhanshuo3 小时前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
财经三剑客7 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos
睿麒7 小时前
鸿蒙app 开发中的 map 映射方式和用法
华为·harmonyos
zhanshuo9 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo9 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉9 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
爱笑的眼睛1119 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu1 天前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos