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

自定义组件冻结功能

developer.huawei.com/consumer/cn…

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

转换前

/**
 *
 * FreezeCmp.ets
 * Created by unravel on 2024/9/12
 * @abstract
 */

import { router } from '@kit.ArkUI';

@Component({ freezeWhenInactive: true })
export struct FreezeCmp {
  @StorageLink('PropA') @Watch("first") storageLink: number = 47;

  first() {
    console.info("first page " + `${this.storageLink}`)
  }

  build() {
    Column() {
      Text(`From fist Page ${this.storageLink}`).fontSize(50)
      Button('first page storageLink + 1').fontSize(30)
        .onClick(() => {
          this.storageLink += 1
        })
      Button('go to next page').fontSize(30)
        .onClick(() => {
          router.pushUrl({ url: 'pages/second' })
        })
    }
  }
}

转换后

if (!("finalizeConstruction" in ViewPU.prototype)) {
    Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
}
interface FreezeCmp_Params {
    storageLink?: number;
}
import router from "@ohos:router";
export class FreezeCmp extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
        super(parent, __localStorage, elmtId, extraInfo);
        if (typeof paramsLambda === "function") {
            this.paramsGenerator_ = paramsLambda;
        }
        this.__storageLink = this.createStorageLink('PropA', 47, "storageLink");
        if (super["initAllowComponentFreeze"] && typeof super["initAllowComponentFreeze"] === "function") {
            super["initAllowComponentFreeze"](true);
        }
        this.setInitiallyProvidedValue(params);
        this.declareWatch("storageLink", this.first);
        this.finalizeConstruction();
    }
    setInitiallyProvidedValue(params: FreezeCmp_Params) {
    }
    updateStateVars(params: FreezeCmp_Params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__storageLink.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__storageLink.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    private __storageLink: ObservedPropertyAbstractPU<number>;
    get storageLink() {
        return this.__storageLink.get();
    }
    set storageLink(newValue: number) {
        this.__storageLink.set(newValue);
    }
    first() {
        console.info("first page " + `${this.storageLink}`);
    }
    initialRender() {
        this.observeComponentCreation2((elmtId, isInitialRender) => {
            Column.create();
        }, Column);
        this.observeComponentCreation2((elmtId, isInitialRender) => {
            Text.create(`From fist Page ${this.storageLink}`);
            Text.fontSize(50);
        }, Text);
        Text.pop();
        this.observeComponentCreation2((elmtId, isInitialRender) => {
            Button.createWithLabel('first page storageLink + 1');
            Button.fontSize(30);
            Button.onClick(() => {
                this.storageLink += 1;
            });
        }, Button);
        Button.pop();
        this.observeComponentCreation2((elmtId, isInitialRender) => {
            Button.createWithLabel('go to next page');
            Button.fontSize(30);
            Button.onClick(() => {
                router.pushUrl({ url: 'pages/second' });
            });
        }, Button);
        Button.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}

对比

查看编译过后的代码，我们发现，在组件的构造函数里做了以下事情

1. 查看父类是否有 initAllowComponentFreeze 方法，如果有，使用true作为参数调用该函数
2. 最终调用了 finalizeConstruction

搜索到有这个方法 initAllowComponentFreeze

在这个方法里，将freezeState标志存储下来了