鸿蒙UI开发快速入门 —— part08: 组件状态管理之@Provide/@Consume装饰器

1、前言

在此之前,我们已经先后学习了三个装饰器:@State、@Props、@Link,它们的功能和使用场景分别是什么?暂停回忆一下。

我们目前已经可以处理组件内状态(@State),也可以处理父组件向子组件传递状态(@Props),还可以处理父组件与子组件共用状态(@Link)。

我们再想一种场景:如果有一个状态,有非常多个子组件都需要共用,同时,子组件的层级可能会不止一层,此时,如果我们想做到类似的效果的话,则需要为每个层级都传递一遍@Props,这将是灾难。

为了解决多层级的状态同步问题,鸿蒙引入了 @Provide装饰器和@Consume装饰器。

@Provide和@Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,@Provide和@Consume摆脱参数传递机制的束缚,实现跨层级传递。

其中@Provide装饰的变量是在祖先节点中,可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中,去“消费(绑定)”祖先节点提供的变量。

接下来我们详细了解他们。

2、@Provide装饰器和@Consume装饰器

@Provide/@Consume装饰的状态变量有以下特性:

    • @Provide装饰的状态变量自动对其所有后代组件可用,即该变量被“provide”给他的后代组件。由此可见,@Provide的方便之处在于,开发者不需要多次在组件之间传递变量。

    • 后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步,与@State/@Link不同的是,前者可以在多层级的父子组件之间传递。

    • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,变量类型必须相同。

    • @Provide和@Consume通过相同的变量名或者相同的变量别名绑定时,@Provide修饰的变量和@Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内,包括其子组件中声明多个同名或者同别名的@Provide装饰的变量。

    • 允许装饰的变量类型: Object、class、string、number、boolean、enum以及这些类型的数组。

    • @Provide必须指定变量初始值,@Consume禁止本地初始化。

示例代码如下:

// 通过相同的变量名绑定@Provide a: number = 0;@Consume a: number;// 通过相同的变量别名绑定@Provide('a') b: number = 0;@Consume('a') c: number;

@Provide装饰器和@Consume装饰器的具体使用方法与前几个装饰器非常类似。我们写一个Demo展示其用法。

在下面的示例是与后代组件双向同步状态@Provide和@Consume场景。当分别点击CompA和CompD组件内Button时,reviewVotes 的更改会双向同步在CompA和CompD中。

@Componentstruct CompD {  // @Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的@Provide装饰的变量  @Consume reviewVotes: number;  build() {    Column() {      Text(`reviewVotes(${this.reviewVotes})`)      Button(`reviewVotes(${this.reviewVotes}), give +1`)        .onClick(() => this.reviewVotes += 1)    }    .width('50%')  }}@Componentstruct CompC {  build() {    Row({ space: 5 }) {      CompD()      CompD()    }  }}@Componentstruct CompB {  build() {    CompC()  }}@Entry@Componentstruct CompA {  // @Provide装饰的变量reviewVotes由入口组件CompA提供其后代组件  @Provide reviewVotes: number = 0;  build() {    Column() {      Button(`reviewVotes(${this.reviewVotes}), give +1`)        .onClick(() => this.reviewVotes += 1)      CompB()    }  }}

界面如下,我们不管点击哪个按钮,所有的reviewVotes(0)中的数据都会同步更新。

图片

3、one more thing

不知道有朋友注意到没有,目前我们学习到的状态管理装饰器有个概念:同步。那就意味着,数据变化后其他关联的状态也会发生变化。

默认情况下,数据的变化只能观测到一层,也就是,假设有个对象的属性也是一个对象,那嵌套的属性变化则不会触发状态同步。​​​​​​​

class SimpleClass {  age: number;  name: string;}class ComplexClass {  simpleClass: SimpleClass;}

如上代码,SimpleClass中的age和name变更后可以感知到变化,ComplexClass中simpleClass的age和name属性变化时,则无法感知,因为age和name是ComplexClass下面的SimpleClass的属性。

默认情况下,只能观测到一层属性的变化。

那我们想观测多层的变化,怎么办呢?

这就引出了@Observed/@ObjectLink装饰器。

4、@Observed/@ObjectLink装饰器。

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步:

    • 被@Observed装饰的类,可以被观察到属性的变化;

    • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中的属性,这个属性同样也需要被@Observed装饰。

    • 单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。

限制条件

    • 使用@Observed装饰class会改变class原始的原型链,@Observed和其他类装饰器装饰同一个class可能会带来问题。

    • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。

示例:​​​​​​

class ClassA {  public c: number;  constructor(c: number) {    this.c = c;  }}@Observedclass ClassB {  public a: ClassA;  public b: number;  constructor(a: ClassA, b: number) {    this.a = a;    this.b = b;  }}

以上示例中,ClassB被@Observed装饰,其成员变量的赋值的变化是可以被观察到的,但对于ClassA,没有被@Observed装饰,其属性的修改不能被观察到。​​​​​​​

@ObjectLink b: ClassB// 赋值变化可以被观察到this.b.a = new ClassA(5)this.b.b = 5// ClassA没有被@Observed装饰,其属性的变化观察不到this.b.a.c = 5

@ObjectLink:@ObjectLink只能接收被@Observed装饰class的实例,可以观察到:

    • 其属性的数值的变化,其中属性是指Object.keys(observedObject)返回的所有属性。

    • 如果数据源是数组,则可以观察到数组item的替换,如果数据源是class,可观察到class的属性的变化。

5、结语

至此,我们已经了解完了所有组件状态管理相关的内容。接下来,我们再来学习应用级别的状态管理。

请持续关注“鸿蒙UI开发快速入门 —— part09”

如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!

扫描下面的二维码关注公众号。

  • 25
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要针对这个接口进行压力测试,你可以按照以下步骤进行: 1. 下载和安装 JMeter:首先,你需要从 Apache JMeter 官方网站(https://jmeter.apache.org/)下载并安装 JMeter。 2. 创建测试计划:在 JMeter 中,测试用例被称为 "测试计划"。你可以在 JMeter 的界面上右键点击 "Test Plan",选择 "Add" -> "Threads (Users)" -> "Thread Group" 来创建一个线程组。 3. 配置线程组:在线程组的属性中,你可以设置线程数(模拟的并发用户数)、循环次数、启动延迟等参数。 4. 添加 HTTP 请求:在线程组下面,你可以添加 "HTTP Request" sampler。设置请求的 URL 为 "http://localhost:8086/hos-admin/api/data/consume",设置请求方法(GET、POST等)和其他参数。 5. 添加参数和头部信息:如果接口需要传递参数或者头部信息,你可以在 "HTTP Request" sampler 中添加对应的参数和头部信息。 6. 添加监听:为了查看测试结果,你可以添加监听。右键点击线程组,选择 "Add" -> "Listener" 来添加一个监听。常用的监听包括 "Summary Report"、"View Results Tree" 和 "Aggregate Report"。 7. 配置压力测试参数:在监听中,你可以设置并发用户数、持续时间、断言等参数。此外,你还可以通过配置 "Ramp-Up Period" 来模拟用户逐渐增加的场景。 8. 运行测试计划:点击工具栏上的 "运行" 按钮,JMeter 将开始执行压力测试。你可以监控测试进度和结果。 请注意,这只是一个基本的压力测试配置示例,你可能需要根据具体接口的要求进行参数设置和其他调整。另外,压力测试可能会对被测试的服务产生一定的负载,请确保在适当的环境中进行测试,并且遵守相关的使用规范。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值