鸿蒙开发:V2版本装饰器@Once

前言

本文代码案例基于Api13。

最近准备把refresh刷新库的装饰器由V1升级至V2时,遇到了一个问题,在@Prop装饰器切换@Param装饰器时,发现了自定义组件的属性无法修改问题,提示报错:

TypeScript 复制代码
Cannot assign to 'testContent' because it is a read-only property. <ArkTSCheck>

实际错误截图:

错误原因为,@Param装饰的变量仅支持本地初始化,不允许在组件内部直接修改变量本身。

虽然知道了原因,但是由于V1版本的逻辑,在自定义组件中除了来自于调用者的传递之外,而自身的属性也需要进行动态修改,否则改动量就很大,正要寻找他法进行实现时,@Once装饰器映入了眼帘。

什么是@Once装饰器

@Once装饰器作为辅助装饰器,本身没有对装饰类型的要求以及对变量的观察能力,但是它具有有两个作用,第一个是解决@Param装饰器修饰后的属性不能修改问题,第二个就是,实现仅从外部初始化一次、不接受后续同步变化的能力,也就是当后续数据源更改时,不会将修改同步给子组件。

有一点需要注意,那就是@Once装饰器不能单独使用,必须 搭配@Param使用,结合使用时,不会影响@Param的观测能力,仅针对数据源的变化做拦截,还有就是谁在前谁在后,这个都不会造成影响。

搭配使用时,前后位置都可以:

TypeScript 复制代码
@Param @Once testContent: string = "测试数据一"
@Once @Param testContent2: string = "测试数据一"

使用场景

如果我们仅用 @Param装饰进行修饰,会发现,调用者只要数据有改变就会引起自定义组件数据变化,如果你想仅仅初始化进来数据同步一下,之后数据变化无须在同步,那么就可以使用@Once装饰器进行修饰,修饰后,无论怎么修改都不会引起数据变化。

TypeScript 复制代码
@ComponentV2
struct RefreshLayout {
  @Param @Once testContent: string = "测试数据一"

  build() {
    Column() {
      Text(this.testContent)
    }
  }
}

@Entry
@ComponentV2
struct Index {
  @Local testContent: string = "Hello World"

  build() {
    Column() {
      RefreshLayout({ testContent: this.testContent })
      Button("点击改变")
        .margin({ top: 20 })
        .onClick(() => {
          this.testContent = "测试数据二"
        })
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

上面的情况是外部调用者进行更新,不想引起自定义组件发生数据改变,如果你想在自定义组件内部,使用@Param修饰后的属性,可以发生改变,且能更新UI,那么就可以使用@Once装饰器进行修饰。

TypeScript 复制代码
@ComponentV2
struct RefreshLayout {
  @Param @Once testContent: string = "测试数据一"

  build() {
    Column() {
      Text(this.testContent)
      Button("点击改变")
        .margin({ top: 20 })
        .onClick(() => {
          this.testContent = "测试数据二"
        })
    }
  }
}

@Entry
@ComponentV2
struct Index {
  @Local testContent: string = "Hello World"

  build() {
    Column() {
      RefreshLayout({ testContent: this.testContent })
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

相关总结

@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。

以下和其他装饰器结合使用就是错误的案例:

TypeScript 复制代码
 @Local @Once testContent: string = "Hello World"

会报错异常:

TypeScript 复制代码
'@Once' works only when used with '@Param' in pairs. <ArkTSCheck>

异常截图如下:

相关推荐
似霰43 分钟前
安卓adb shell串口基础指令
android·adb
NapleC1 小时前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
fatiaozhang95273 小时前
中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
android·adb·电视盒子·魔百盒刷机·魔百盒固件
CYRUS_STUDIO4 小时前
Android APP 热修复原理
android·app·hotfix
我爱学习_zwj4 小时前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC4 小时前
HarmonyOS:1.7
harmonyos
鸿蒙布道师4 小时前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师4 小时前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
大耳猫5 小时前
【解决】Android Gradle Sync 报错 Could not read workspace metadata
android·gradle·android studio