自定义组件冻结功能
developer.huawei.com/consumer/cn…
当@ComponentV2装饰的自定义组件处于非激活状态时,状态变量将不响应更新,即@Monitor不会调用,状态变量关联的节点不会刷新。通过freezeWhenInactive属性来决定是否使用冻结功能,不传参数时默认不使用
转换前
ts 代码解读复制代码/**
*
* FreezeCmp.ets
* Created by unravel on 2024/9/12
* @abstract
*/
import { router } from '@kit.ArkUI';
@ObservedV2
export class Book {
@Trace page: number = 100;
constructor(page: number) {
this.page = page;
}
@Monitor("page")
onPageChange(monitor: IMonitor) {
console.log(`Page change : ${this.page}`);
}
}
export let book: Book = new Book(100);
@ComponentV2({ freezeWhenInactive: true })
export struct FreezeCmp {
build() {
Column() {
Text(`From fist Page ${book.page}`).fontSize(50)
Button('first page + 1').fontSize(30)
.onClick(() => {
book.page += 1;
})
Button('go to next page').fontSize(30)
.onClick(() => {
router.pushUrl({ url: 'pages/Page' });
})
}
}
}
转换后
ts 代码解读复制代码if (!("finalizeConstruction" in ViewPU.prototype)) {
Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
}
import router from "@ohos:router";
@ObservedV2
export class Book {
@Trace
page: number = 100;
constructor(page: number) {
this.page = page;
}
@Monitor("page")
onPageChange(monitor: IMonitor) {
console.log(`Page change : ${this.page}`);
}
}
export let book: Book = new Book(100);
export class FreezeCmp extends ViewV2 {
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda, extraInfo) {
super(parent, elmtId, extraInfo);
this.finalizeConstruction(true);
}
initialRender() {
this.observeComponentCreation2((elmtId, isInitialRender) => {
Column.create();
}, Column);
this.observeComponentCreation2((elmtId, isInitialRender) => {
Text.create(`From fist Page ${book.page}`);
Text.fontSize(50);
}, Text);
Text.pop();
this.observeComponentCreation2((elmtId, isInitialRender) => {
Button.createWithLabel('first page + 1');
Button.fontSize(30);
Button.onClick(() => {
book.page += 1;
});
}, Button);
Button.pop();
this.observeComponentCreation2((elmtId, isInitialRender) => {
Button.createWithLabel('go to next page');
Button.fontSize(30);
Button.onClick(() => {
router.pushUrl({ url: 'pages/Page' });
});
}, Button);
Button.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
对比
查看编译过后的代码,我们发现,在组件的构造函数里调用finalizeConstruction是传递了一个boolean值true
评论记录:
回复评论: