鸿蒙ACE-V2状态分析-自定义组件冻结

自定义组件冻结功能

developer.huawei.com/consumer/cn…

当@ComponentV2装饰的自定义组件处于非激活状态时，状态变量将不响应更新，即@Monitor不会调用，状态变量关联的节点不会刷新。通过freezeWhenInactive属性来决定是否使用冻结功能，不传参数时默认不使用

转换前

/**
 *
 * 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' });
        })
    }
  }
}

转换后

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