如何监听多层状态变化
场景说明
应用开发过程中，当希望通过状态变量控制页面刷新时，大家通常想到的就是装饰器@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中刷新出来了。
当然，嵌套数组等也是同样的原理，大家可以参考官方指南进行尝试。
