企业科技网站建设,网站图片怎么做才有吸引力,网站建设公司小猫建站,部队网站建设建议系列文章目录
1.HarmonyOS | 状态管理(一) | State装饰器 2.HarmonyOS | 状态管理(二) | Prop装饰器 3.HarmonyOS | 状态管理(三) | Link装饰器 4.HarmonyOS | 状态管理(四) | Provide和Consume装饰器 文章目录 系列文章目录前言一、ObjectLink和Observed类装饰器用于哪些场景…系列文章目录
1.HarmonyOS | 状态管理(一) | State装饰器 2.HarmonyOS | 状态管理(二) | Prop装饰器 3.HarmonyOS | 状态管理(三) | Link装饰器 4.HarmonyOS | 状态管理(四) | Provide和Consume装饰器 文章目录 系列文章目录前言一、ObjectLink和Observed类装饰器用于哪些场景二、特性三、限制条件四、使用场景1.观察变化和行为表现2.嵌套对象3.对象数组 五、总结 前言
学习到这里我们之前只是学习了单个类或者属性状态的管理现在我们这篇就讲讲多个类数组嵌套类的状态管理Observed装饰器和ObjectLink装饰器 一、ObjectLink和Observed类装饰器用于哪些场景 ObjectLink和Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步 二、特性 被 Observed 装饰的类可以被 观察到属性的变化 子组件 中 ObjectLink装饰器 装饰的状态变量用于 接收Observed装饰的类的实例和 父组件 中 对应的状态变量 建立 双向数据绑定 。 单独 使用 Observed 是 没有任何作用的需要搭配 ObjectLink 或者 Prop 使用。
三、限制条件
使用 Observed 装饰class会 改变class原始的原型链Observed和其他类装饰器装饰同一个class可能会带来问题。ObjectLink装饰器 不能 在 Entry装饰 的自定义组件中使用。
四、使用场景
1.观察变化和行为表现
观察的变化
class ClassA {public c: number;constructor(c: number) {this.c c;}
}Observed
class ClassB {public a: ClassA;public b: number;constructor(a: ClassA, b: number) {this.a a;this.b b;}
}行为表现
ObjectLink b: ClassB// 赋值变化可以被观察到
this.b.a new ClassA(5)
this.b.b 5// ClassA没有被Observed装饰其属性的变化观察不到
this.b.a.c 5注ClassB被Observed装饰其成员变量的赋值的变化是可以被观察到的但对于ClassA没有被Observed装饰其属性的修改不能被观察到。
2.嵌套对象
数据结构
// objectLinkNestedObjects.ets
let NextID: number 1;Observed
class ClassA {public id: number;public c: number;constructor(c: number) {this.id NextID;this.c c;}
}Observed
class ClassB {public a: ClassA;constructor(a: ClassA) {this.a a;}
}嵌套类对象的使用方法
Component
struct ViewA {label: string ViewA1;ObjectLink a: ClassA;build() {Row() {Button(ViewA [${this.label}] this.a.c${this.a.c} 1).onClick(() {this.a.c 1;})}}
}Entry
Component
struct ViewB {State b: ClassB new ClassB(new ClassA(0));build() {Column() {// in low version,DevEco may throw a warning,but it does not matter.// you can still compile and run.ViewA({ label: ViewA #1, a: this.b.a })ViewA({ label: ViewA #2, a: this.b.a })Button(ViewB: this.b.a.c 1).onClick(() {this.b.a.c 1;})Button(ViewB: this.b.a new ClassA(0)).onClick(() {this.b.a new ClassA(0);})Button(ViewB: this.b new ClassB(ClassA(0))).onClick(() {this.b new ClassB(new ClassA(0));})}}
}ViewB中的事件句柄 this.b.a new ClassA(0) 和this.b new ClassB(new ClassA(0)) 对State装饰的变量b和其属性的修改。 this.b.a.c … 该变化属于第二层的变化State无法观察到第二层的变化但是ClassA被Observed装饰ClassA的属性c的变化可以被ObjectLink观察到。
ViewA中的事件句柄 this.a.c 1对ObjectLink变量a的修改将触发Button组件的刷新。ObjectLink和Prop不同ObjectLink不拷贝来自父组件的数据源而是在本地构建了指向其数据源的引用。 ObjectLink变量是只读的this.a new ClassA(…)是不允许的因为一旦赋值操作发生指向数据源的引用将被重置同步将被打断。
3.对象数组
Component
struct ViewA {// 子组件ViewA的ObjectLink的类型是ClassAObjectLink a: ClassA;label: string ViewA1;build() {Row() {Button(ViewA [${this.label}] this.a.c ${this.a.c} 1).onClick(() {this.a.c 1;})}}
}Entry
Component
struct ViewB {// ViewB中有State装饰的ClassA[]State arrA: ClassA[] [new ClassA(0), new ClassA(0)];build() {Column() {ForEach(this.arrA,(item) {ViewA({ label: #${item.id}, a: item })},(item) item.id.toString())// 使用State装饰的数组的数组项初始化ObjectLink其中数组项是被Observed装饰的ClassA的实例ViewA({ label: ViewA this.arrA[first], a: this.arrA[0] })ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] })Button(ViewB: reset array).onClick(() {this.arrA [new ClassA(0), new ClassA(0)];})Button(ViewB: push).onClick(() {this.arrA.push(new ClassA(0))})Button(ViewB: shift).onClick(() {this.arrA.shift()})Button(ViewB: chg item property in middle).onClick(() {this.arrA[Math.floor(this.arrA.length / 2)].c 10;})Button(ViewB: chg item property in middle).onClick(() {this.arrA[Math.floor(this.arrA.length / 2)] new ClassA(11);})}}
}this.arrA[Math.floor(this.arrA.length/2)] new ClassA(…) 该状态变量的改变触发2次更新 ForEach数组项的赋值导致ForEach的itemGenerator被修改因此数组项被识别为有更改ForEach的item builder将执行创建新的ViewA组件实例。 ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] })上述更改改变了数组中第二个元素所以绑定this.arrA[1]的ViewA将被更新 this.arrA.push(new ClassA(0)) 将触发2次不同效果的更新 ForEach新添加的ClassA对象对于ForEach是未知的itemGeneratorForEach的item builder将执行创建新的ViewA组件实例。 ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] })数组的最后一项有更改因此引起第二个ViewA的实例的更改。对于ViewA({ label: ViewA this.arrA[first], a: this.arrA[0] })数组的更改并没有触发一个数组项更改的改变所以第一个ViewA不会刷新。 this.arrA[Math.floor(this.arrA.length/2)].cState无法观察到第二层的变化但是ClassA被Observed装饰ClassA的属性的变化将被ObjectLink观察到。 五、总结 被 Observed 装饰的类可以被 观察到属性的变化 子组件 中 ObjectLink装饰器 装饰的状态变量用于 接收Observed装饰的类的实例和 父组件 中 对应的状态变量 建立 双向数据绑定 。 单独 使用 Observed 是 没有任何作用的需要搭配 ObjectLink 或者 Prop 使用。
