如何监听多层状态的变化(使用@State、@Observed、@ObjectLink装饰器) 原创 精华

野生菌君
发布于 2023-7-20 14:27
浏览
3收藏

如何监听多层状态变化

场景说明

应用开发过程中,当希望通过状态变量控制页面刷新时,大家通常想到的就是装饰器@State,但是在嵌套场景下,单单使用@State并不能监听到变量的状态变化,这就引出了@Observed/@ObjectLink装饰器。本文就为大家介绍如何配合使用@State、@Observed、@ObjectLink三个装饰器监听多层状态变化。

概念原理

在讲解具体操作前,大家先理解以下几个概念:

  • 第一层状态变化:指不包含嵌套关系的变量的变化,比如string、number、boolean等基础数据类型的状态变化,以及嵌套结构中第一层变量的状态变化。

  • 多层状态变化:指包含嵌套关系的二层及以下变量的变化,比如嵌套类中被嵌套类的成员变量的状态变化,嵌套数组中被嵌套数组的状态变化等。

第一层变量的状态变化可以用@State监听,二层及以下变量的状态变化则需要使用@Observed/@ObjectLink监听。以嵌套结构举例,如下图:

如何监听多层状态的变化(使用@State、@Observed、@ObjectLink装饰器)-鸿蒙开发者社区

为便于理解,通过以下例子具体说明单层和多层状态变化:

class ClassB {
  public c: number;

  constructor(c: number) {
    this.c = c;
  }
}

class ClassA {
  // ClassB成员变量的类型为ClassA,ClassA为被嵌套类
  public b: ClassB;

  constructor(b: ClassB) {
    this.b = b;
  }
}

a: ClassA
// 变量b为ClassA的成员变量,为第一层变量,所以变量b的状态变化即为第一层状态变化
this.a.b = new ClassB(0)
// 变量c为被嵌套类ClassB的成员变量,变量c的状态变化即为第二层状态变化
this.a.b.c = 5

监听第一层状态变化

监听第一层状态变化可以使用@State修饰变量,变量发生变化后即可同步刷新UI,这是大家最常用的场景,为便于理解,此处举例说明一下:

class ClassA {
  public a:number

  constructor(a:number) {
    this.a = a;
  }
}

@Entry
@Component
struct ViewA {
  // 使用@State修饰变量class_A,以监听其变化
  @State class_A: ClassA = new ClassA(0);

  build() {
    Column() {
      Row(){
        Button(`第一层变量+1`)
          .margin({top:10,right:20})
          .backgroundColor('#E8A027')
          .onClick(() => {
            // class_A的成员变量a加1,class_A发生变化
            this.class_A.a += 1;
          })
        // 将第一层变量在UI呈现出来
        Text(`${this.class_A.a}`)
      }
      .margin({top:50})

      Row(){
        Button(`第一层变量变为2`)
          .margin({top:10,right:20})
          .onClick(() => {
            // 将新的ClassA实例赋值给class_A,class_A发生变化
            this.class_A = new ClassA(2);
          })
        // 将第一层变量在UI呈现出来
        Text(`${this.class_A.a}`)
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

效果如下,如图可以看出第一层变量发生变化后可以实时在UI呈现出来,所以@State可以有效的监听第一层变量的状态变化:

如何监听多层状态的变化(使用@State、@Observed、@ObjectLink装饰器)-鸿蒙开发者社区

监听多层状态变化

接下来,我们介绍如何使用@Observed/@ObjectLink监听多层状态变化。
在第一层状态监听的基础上我们引入ClassB,构造一个嵌套结构,从而具有多层变量,如下:

// 引入ClassB
class ClassB {
  public b: number;

  constructor(b: number) {
    this.b = b;
  }
}


class ClassA {
  // ClassA成员变量a的类型为ClassB,从而形成嵌套结构,ClassB的成员变量b为第二层变量
  public a:ClassB

  constructor(a:ClassB) {
    this.a = a;
  }
}

此时我们可以验证一下,如果仅使用@State是否可以监听到第二层变量的变化:

// 引入ClassB
class ClassB {
  public b: number;

  constructor(b: number) {
    this.b = b;
  }
}

class ClassA {
  // ClassA成员变量a的类型为ClassB,从而形成嵌套结构,ClassB的成员变量b为第二层变量
  public a:ClassB

  constructor(a:ClassB) {
    this.a = a;
  }
}

@Entry
@Component
struct ViewA {
  // 使用@State修饰变量class_A
  @State class_A: ClassA = new ClassA(new ClassB(0));

  build() {
    Column() {
      Row(){
        // 点击按钮,第二层变量发生变化
        Button('第二层变量+1')
          .margin({top:10,right:20})
          .backgroundColor('#E8A027')
          .onClick(() => {
            // 第二层变量变化,嵌套类ClassB的成员变量b加1
            this.class_A.a.b += 1;
          })
        // 将第二层变量在UI呈现出来
        Text(`${this.class_A.a.b}`)
      }
      .margin({top:50})
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

效果如下,可以看出当第二层变量发生变化时,UI没有任何变化,所以单纯使用@State不能监听到二层及以下变量的变化:

如何监听多层状态的变化(使用@State、@Observed、@ObjectLink装饰器)-鸿蒙开发者社区

接下来我们使用@Observed/@ObjectLink监听本例中第二层变量的变化。
根据使用规则,需要使用@Observed修饰嵌套类,使用@ObjectLink修饰嵌套类的实例,且@ObjectLink不能在被@Entry修饰的组件中使用,所以我们构建一个子组件,然后在父组件中进行引用,具体代码如下:

// 使用@Observed修饰ClassB
@Observed
class ClassB {
  public b: number;

  constructor(b: number) {
    this.b = b;
  }
}

class ClassA {
  // ClassA成员变量a的类型为ClassB,从而形成嵌套结构,ClassB的成员变量b为第二层变量
  public a:ClassB

  constructor(a:ClassB) {
    this.a = a;
  }
}

// 构建子组件ViewB用于承载@ObjectLink修饰的变量
@Component
struct ViewB {
  // 使用@ObjectLink修饰ClassB的实例class_B
  @ObjectLink class_B: ClassB;
  build() {
    Row() {
      // 将ClassB的成员变量b在UI呈现出来
      Text(`${this.class_B.b}`)
    }
    .margin({top:100})
  }
}

@Entry
@Component
struct ViewA {
  @State class_A: ClassA = new ClassA(new ClassB(0));

  build() {
    Column() {
      ViewB({ class_B: this.class_A.a })
      Row(){
        // 点击按钮,第二层变量发生变化
        Button('第二层变量class_B.b加1')
          .margin({top:10,right:20})
          .backgroundColor('#E8A027')
          .onClick(() => {
            // 第二层变量变化,嵌套类ClassB的成员变量b加1
            this.class_A.a.b += 1;
          })
      }
      .margin({top:50})
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

我们来看下效果:

如何监听多层状态的变化(使用@State、@Observed、@ObjectLink装饰器)-鸿蒙开发者社区

如图,现在当二层变量发生变化时,可以完美的被监听到,并在UI中刷新出来了。

当然,嵌套数组等也是同样的原理,大家可以参考官方指南进行尝试。

参考

@Observed和@ObjectLink:嵌套类对象属性变化

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2023-7-20 19:08:11修改
7
收藏 3
回复
举报
6条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

挺好奇一般啥场景会用到多层状态

回复
2023-7-20 15:26:55
笨笨的婧婧
笨笨的婧婧

多了解了两个装饰器

回复
2023-7-21 11:59:01
0aaron
0aaron

感觉是因为@Observed/@ObjectLink设定的权限更高

回复
2023-7-21 17:42:21
我不保射手的别打我
我不保射手的别打我 回复了 红叶亦知秋
挺好奇一般啥场景会用到多层状态

主要是嵌套

1
回复
2023-7-24 14:33:05
安苒anran0
安苒anran0

非常使用,很多场景会用到

回复
2023-7-24 18:29:24
物联风景
物联风景

不错不错,非常好!!

回复
2023-7-26 16:44:09
回复
    相关推荐