makeObserved接口:将非观察数据变为可观察数据
developer.huawei.com/consumer/cn…
为了将普通不可观察数据变为可观察数据,开发者可以使用makeObserved接口
转换前
ts 代码解读复制代码/**
*
* MakeObservedCmp.ets
* Created by unravel on 2024/9/10
* @abstract
*/
import { JSON } from '@kit.ArkTS';
import { UIUtils } from '@kit.ArkUI';
class Info {
id: number = 0;
constructor(id: number) {
this.id = id;
}
}
let test: Record<string, number> = { "a": 123 };
let testJsonStr: string = JSON.stringify(test);
let test2: Record<string, Info> = { "a": new Info(20) };
let test2JsonStr: string = JSON.stringify(test2);
@ComponentV2
export struct MakeObservedCmp {
message: Record<string, number> =
UIUtils.makeObserved<Record<string, number>>(JSON.parse(testJsonStr) as Record<string, number>);
message2: Record<string, Info> =
UIUtils.makeObserved<Record<string, Info>>(JSON.parse(test2JsonStr) as Record<string, Info>);
build() {
Column() {
Text(`${this.message.a}`)
.fontSize(50)
.onClick(() => {
this.message.a++;
})
Text(`${this.message2.a.id}`)
.fontSize(50)
.onClick(() => {
this.message2.a.id++;
})
}
.height('100%')
.width('100%')
}
}
转换后
ComponentV2中转换成了如下代码
ts 代码解读复制代码if (!("finalizeConstruction" in ViewPU.prototype)) {
Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
}
import JSON from "@ohos:util.json";
import { UIUtils } from "@ohos:arkui.StateManagement";
class Info {
id: number = 0;
constructor(id: number) {
this.id = id;
}
}
let test: Record<string, number> = { "a": 123 };
let testJsonStr: string = JSON.stringify(test);
let test2: Record<string, Info> = { "a": new Info(20) };
let test2JsonStr: string = JSON.stringify(test2);
export class MakeObservedCmp extends ViewV2 {
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) {
super(parent, elmtId, extraInfo);
this.message = UIUtils.makeObserved<Record<string, number>>(JSON.parse(testJsonStr) as Record<string, number>);
this.message2 = UIUtils.makeObserved<Record<string, Info>>(JSON.parse(test2JsonStr) as Record<string, Info>);
this.finalizeConstruction();
}
message: Record<string, number>;
message2: Record<string, Info>;
initialRender() {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Column.create();
Column.height('100%');
Column.width('100%');
}, Column);
this.observeComponentCreation2((elmtId, isInitialRender) => {
Text.create(`${this.message.a}`);
Text.fontSize(50);
Text.onClick(() => {
this.message.a++;
});
}, Text);
Text.pop();
this.observeComponentCreation2((elmtId, isInitialRender) => {
Text.create(`${this.message2.a.id}`);
Text.fontSize(50);
Text.onClick(() => {
this.message2.a.id++;
});
}, Text);
Text.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
如果是ComponentV1,会转换成如下代码
UIUtil.makeObserved
可以看到编译过后,UIUtils.makeObserved没有任何改变
我们可以从 gitee.com/openharmony… 中看到这个方法的具体实现
最终实际调用了RefInfo的get方法
RefInfo.get
小结
- 调用makeObserved会根据传入的对象是否已经是被观察的对象,做不同的处理
- 根据传入target的类型分别创建不同类型的代理处理对象
评论记录:
回复评论: