ArkUI JS层

mushanshui

已于 2024-06-24 14:52:36 修改

阅读量183

点赞数 2

分类专栏：前端跨平台文章标签： javascript 前端 vue.js

于 2024-06-20 12:31:01 首次发布

本文链接：https://blog.csdn.net/mushanshui/article/details/134764526

版权

前端跨平台专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS层代码分析

关键方法：

initialRender
observeComponentCreation
ViewStackProcessor.StartGetAccessRecordingFor
ViewStackProcessor.StopGetAccessRecording()
loadDocument

class Index extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__message = new ObservedPropertySimplePU('Hello World', this, "message");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.message !== undefined) {
            this.message = params.message;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__message.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__message.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get message() {
        return this.__message.get();
    }
    set message(newValue) {
        this.__message.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            Column.width('100%');
            Column.height('100%');
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });       
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel("更多");
            Button.onClick(event => {
                console.log("you click more");
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();        
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new Index(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();

"use strict";
class GreenButtonState {
    constructor(width) {
        this.width = 0;
        this.width = width;
    }
}
class GreenButton extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__greenButtonState = new SynchedPropertyObjectTwoWayPU(params.greenButtonState, this, "greenButtonState");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__greenButtonState.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__greenButtonState.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get greenButtonState() {
        return this.__greenButtonState.get();
    }
    set greenButtonState(newValue) {
        this.__greenButtonState.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel('Green Button');
            Button.width(this.greenButtonState.width);
            Button.height(40);
            Button.backgroundColor('#64bb5c');
            Button.fontColor('#FFFFFF，90%');
            Button.onClick(() => {
                if (this.greenButtonState.width < 700) {
                    // 更新class的属性，变化可以被观察到同步回父组件
                    this.greenButtonState.width += 60;
                }
                else {
                    // 更新class，变化可以被观察到同步回父组件
                    this.greenButtonState = new GreenButtonState(180);
                }
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
class Index extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__message = new ObservedPropertySimplePU('Hello World', this, "message");
        this.__greenButtonState = new ObservedPropertyObjectPU(new GreenButtonState(180), this, "greenButtonState");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.message !== undefined) {
            this.message = params.message;
        }
        if (params.greenButtonState !== undefined) {
            this.greenButtonState = params.greenButtonState;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__message.purgeDependencyOnElmtId(rmElmtId);
        this.__greenButtonState.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__message.aboutToBeDeleted();
        this.__greenButtonState.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get message() {
        return this.__message.get();
    }
    set message(newValue) {
        this.__message.set(newValue);
    }
    get greenButtonState() {
        return this.__greenButtonState.get();
    }
    set greenButtonState(newValue) {
        this.__greenButtonState.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            Column.width('100%');
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create(this.message);
            Text.fontSize(50);
            Text.fontWeight(FontWeight.Bold);
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            __Common__.create();
            __Common__.margin(12);
            if (!isInitialRender) {
                __Common__.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new GreenButton(this, { greenButtonState: this.__greenButtonState }, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {});
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
        __Common__.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new Index(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map

添加子View

ViewPU.create(new GreenButton(this, { greenButtonState: this.__greenButtonState }, undefined, elmtId));

@Provide & @Consume

"use strict";
class CompD extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__reviewVotes = this.initializeConsume("reviewVotes", "reviewVotes");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
    }
    aboutToBeDeleted() {
        this.__reviewVotes.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get reviewVotes() {
        return this.__reviewVotes.get();
    }
    set reviewVotes(newValue) {
        this.__reviewVotes.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            Column.width('50%');
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create(`reviewVotes(${this.reviewVotes})`);
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`reviewVotes(${this.reviewVotes}), give +1`);
            Button.onClick(() => this.reviewVotes += 1);
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
class CompC extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
    }
    aboutToBeDeleted() {
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Row.create({ space: 5 });
            if (!isInitialRender) {
                Row.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new CompD(this, {}, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {});
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new CompD(this, {}, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {});
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
        Row.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
class CompB extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
    }
    aboutToBeDeleted() {
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    initialRender() {
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new CompC(this, {}, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {});
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
    }
    rerender() {
        this.updateDirtyElements();
    }
}
class Index extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__reviewVotes = new ObservedPropertySimplePU(0, this, "reviewVotes");
        this.addProvidedVar("reviewVotes", this.__reviewVotes);
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.reviewVotes !== undefined) {
            this.reviewVotes = params.reviewVotes;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
    }
    aboutToBeDeleted() {
        this.__reviewVotes.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get reviewVotes() {
        return this.__reviewVotes.get();
    }
    set reviewVotes(newValue) {
        this.__reviewVotes.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`reviewVotes(${this.reviewVotes}), give +1`);
            Button.onClick(() => this.reviewVotes += 1);
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new CompB(this, {}, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {});
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new Index(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map

@Observed&@ObjectLink

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
// objectLinkNestedObjects.ets
let NextID = 1;
let Bag = class Bag {
    constructor(size) {
        this.id = NextID++;
        this.size = size;
    }
};
Bag = __decorate([
    Observed
], Bag);
let User = class User {
    constructor(bag) {
        this.bag = bag;
    }
};
User = __decorate([
    Observed
], User);
let Book = class Book {
    constructor(bookName) {
        this.bookName = bookName;
    }
};
Book = __decorate([
    Observed
], Book);
let BookName = class BookName extends Bag {
    constructor(nameSize) {
        // 调用父类方法对nameSize进行处理
        super(nameSize);
        this.nameSize = nameSize;
    }
};
BookName = __decorate([
    Observed
], BookName);
class ViewA extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.label = 'ViewA';
        this.__bag = new SynchedPropertyNesedObjectPU(params.bag, this, "bag");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.label !== undefined) {
            this.label = params.label;
        }
        this.__bag.set(params.bag);
    }
    updateStateVars(params) {
        this.__bag.set(params.bag);
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__bag.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__bag.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get bag() {
        return this.__bag.get();
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create(`ViewC [${this.label}] this.bag.size = ${this.bag.size}`);
            Text.fontColor('#ffffffff');
            Text.backgroundColor('#ff3fc4c4');
            Text.width(320);
            Text.height(50);
            Text.borderRadius(25);
            Text.margin(10);
            Text.textAlign(TextAlign.Center);
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`ViewA: this.bag.size add 1`);
            Button.width(320);
            Button.backgroundColor('#ff7fcf58');
            Button.margin(10);
            Button.onClick(() => {
                this.bag.size += 1;
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
class ViewC extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.label = 'ViewC1';
        this.__bookName = new SynchedPropertyNesedObjectPU(params.bookName, this, "bookName");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.label !== undefined) {
            this.label = params.label;
        }
        this.__bookName.set(params.bookName);
    }
    updateStateVars(params) {
        this.__bookName.set(params.bookName);
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__bookName.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__bookName.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get bookName() {
        return this.__bookName.get();
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Row.create();
            if (!isInitialRender) {
                Row.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            Column.width(320);
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create(`ViewC [${this.label}] this.bookName.size = ${this.bookName.size}`);
            Text.fontColor('#ffffffff');
            Text.backgroundColor('#ff3fc4c4');
            Text.width(320);
            Text.height(50);
            Text.borderRadius(25);
            Text.margin(10);
            Text.textAlign(TextAlign.Center);
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`ViewC: this.bookName.size add 1`);
            Button.width(320);
            Button.backgroundColor('#ff7fcf58');
            Button.margin(10);
            Button.onClick(() => {
                this.bookName.size += 1;
                console.log('this.bookName.size:' + this.bookName.size);
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        Column.pop();
        Row.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
class ViewB extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.__user = new ObservedPropertyObjectPU(new User(new Bag(0)), this, "user");
        this.__child = new ObservedPropertyObjectPU(new Book(new BookName(0)), this, "child");
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.user !== undefined) {
            this.user = params.user;
        }
        if (params.child !== undefined) {
            this.child = params.child;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
        this.__user.purgeDependencyOnElmtId(rmElmtId);
        this.__child.purgeDependencyOnElmtId(rmElmtId);
    }
    aboutToBeDeleted() {
        this.__user.aboutToBeDeleted();
        this.__child.aboutToBeDeleted();
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    get user() {
        return this.__user.get();
    }
    set user(newValue) {
        this.__user.set(newValue);
    }
    get child() {
        return this.__child.get();
    }
    set child(newValue) {
        this.__child.set(newValue);
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            __Common__.create();
            __Common__.width(320);
            if (!isInitialRender) {
                __Common__.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new ViewA(this, { label: 'ViewA #1', bag: this.user.bag }, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {
                        bag: this.user.bag
                    });
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
        __Common__.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            __Common__.create();
            __Common__.width(320);
            if (!isInitialRender) {
                __Common__.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        {
            this.observeComponentCreation((elmtId, isInitialRender) => {
                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
                if (isInitialRender) {
                    ViewPU.create(new ViewC(this, { label: 'ViewC #3', bookName: this.child.bookName }, undefined, elmtId));
                }
                else {
                    this.updateStateVarsOfChildByElmtId(elmtId, {
                        bookName: this.child.bookName
                    });
                }
                ViewStackProcessor.StopGetAccessRecording();
            });
        }
        __Common__.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`ViewC: this.child.bookName.size add 10`);
            Button.width(320);
            Button.backgroundColor('#ff7fcf58');
            Button.margin(10);
            Button.onClick(() => {
                this.child.bookName.size += 10;
                console.log('this.child.bookName.size:' + this.child.bookName.size);
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`ViewB: this.user.bag = new Bag(10)`);
            Button.width(320);
            Button.backgroundColor('#ff7fcf58');
            Button.margin(10);
            Button.onClick(() => {
                this.user.bag = new Bag(10);
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Button.createWithLabel(`ViewB: this.user = new User(new Bag(20))`);
            Button.width(320);
            Button.backgroundColor('#ff7fcf58');
            Button.margin(10);
            Button.onClick(() => {
                this.user = new User(new Bag(20));
            });
            if (!isInitialRender) {
                Button.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Button.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent());
loadDocument(new ViewB(undefined, {}));
ViewStackProcessor.StopGetAccessRecording();
//# sourceMappingURL=Index.js.map

状态管理

@State

状态名	使用场景	基础数据	对象	备注
@State	组件内状态同步	ObservedPropertySimplePU	ObservedPropertyObjectPU
@Link	父子双向同步		SynchedPropertySimpleTwoWayPU	SynchedPropertyObjectTwoWayPU
@Prop	父子单向同步	SynchedPropertySimplePU	SynchedPropertyObjectPU
@Provide	与后代组件双向同步	ObservedPropertySimplePU	ObservedPropertyObjectPU	addProvidedVar(“xxx”)
@Consume(子)	与后代组件双向同步	SynchedPropertyObjectTwoWayPU	SynchedPropertyObjectTwoWayPU	initializeConsume(“xxx”)
@Observed	嵌套对象属性变化
@ObjectLink	嵌套对象属性变化	—	SynchedPropertyNesedObjectPU

3、父子单向同步

父组件使用@State注解变量，子组件使用@Prop注解定义自己的接收参数。当父组件修改变量时，该变量可以同步到子组件，但子组件修改此变量时不会同步到父组件。

4、与后代组件双向同步

1、@Provide注入
父组件的constructor如下

this.__reviewVotes = new ObservedPropertySimplePU(0, this, "reviewVotes");
this.addProvidedVar("reviewVotes", this.__reviewVotes);
this.setInitiallyProvidedValue(params);

2、@Consume使用
子组件的constructor如下

this.__reviewVotes = this.initializeConsume("reviewVotes", "reviewVotes");
this.setInitiallyProvidedValue(params);

3、ViewPU内部关于provide实现

//pu_view.ts
type ProvidedVarsMapPU = Map<string, ObservedPropertyAbstractPU<any>>;

abstract class ViewPU extends NativeViewPartialUpdate implements IViewPropertiesChangeSubscriber {
	// @Provide'd variables by this class and its ancestors
	protected providedVars_: ProvidedVarsMapPU;
  	constructor(parent: ViewPU, localStorage: LocalStorage, elmtId : number = -1) {
	    super();
	    //如果parent不为空，直接使用parent数据来构造一个providerVars对象，否则创建一个空对象
	    this.providedVars_ = parent ? new Map(parent.providedVars_)
	      : new Map<string, ObservedPropertyAbstractPU<any>>();
	}

	  /**
	   * This View @Provide's a variable under given name
	   * Call this function from the constructor of the sub class
	   * @param providedPropName either the variable name or the alias defined as
	   *        decorator param
	   * @param store the backing store object for this variable (not the get/set variable!)
	   */
	protected addProvidedVar<T>(providedPropName: string, store: ObservedPropertyAbstractPU<T>) {
	    if (this.providedVars_.has(providedPropName)) {
	        throw new ReferenceError(`${this.constructor.name}: duplicate @Provide property with name ${providedPropName}.
	        Property with this name is provided by one of the ancestor Views already.`);
	    }
	    this.providedVars_.set(providedPropName, store);
	}
  /**
   * Method for the sub-class to call from its constructor for resolving
   *       a @Consume variable and initializing its backing store
   *       with the SyncedPropertyTwoWay<T> object created from the
   *       @Provide variable's backing store.
   * @param providedPropName the name of the @Provide'd variable.
   *     This is either the @Consume decorator parameter, or variable name.
   * @param consumeVarName the @Consume variable name (not the
   *            @Consume decorator parameter)
   * @returns initializing value of the @Consume backing store
   */
  protected initializeConsume<T>(providedPropName: string, consumeVarName: string): ObservedPropertyAbstractPU<T> {
  	//因parent使用@Provide注解，在父组件构建时已经使用addProvidedVar添加过，所以此处可以get到
    let providedVarStore : ObservedPropertyAbstractPU<any> = this.providedVars_.get(providedPropName);
    if (providedVarStore === undefined) {
      throw new ReferenceError(`${this.constructor.name}: missing @Provide property with name ${providedPropName}.
          Fail to resolve @Consume(${providedPropName}).`);
    }

    const factory = <T>(source: ObservedPropertyAbstract<T>) => {
      const result : ObservedPropertyAbstractPU<T> = ((source instanceof ObservedPropertySimple) || (source instanceof ObservedPropertySimplePU))
          ? new SynchedPropertyObjectTwoWayPU<T>(source, this, consumeVarName) 
          : new SynchedPropertyObjectTwoWayPU<T>(source, this, consumeVarName);
      return result;
    };
    return providedVarStore.createSync(factory) as  ObservedPropertyAbstractPU<T>;
  }
}

启动分析

1、从JsLoadDocument开始

//qjs_view_register.cpp
static JSValue JsLoadDocument(JSContext* ctx, JSValueConst new_target, int argc, JSValueConst* argv) {
	JSValue jsview = JS_DupValue(ctx, argv[0]);
	JSView* view = static_cast<JSView*>(UnWrapAny(jsView));
	auto page = QJSDeclarativeEngineInstance::GetRunningPage(ctx);
	CreatePageRoot(page, view);
}

//qjs_view_register_impl_ng.cpp
void CreatePageRoot(RefPtr<JsAcePage>& page, JSView* view) {
	auto pageRootNode = AceType::DynamicCast<NG::UINode>(view->CreateViewNode());
	pageRootNode->MountToParent(pageNode);
}

//js_view.cpp
RefPtr<AceType> JSViewPartialUpdate::CreateViewNode()
{
	auto node = ViewPartialUpdateModel::GetInstance()->CreateNode(std::move(info));
}

//view_partial_update_model_ng.cpp
RefPtr<AceType> ViewPartialUpdateModelNG::CreateNode(NodeInfoPU&& info)
{
	RefPtr<NG::CustomNodeBase> customNode = NG::CustomNode::CreateCustomNode(viewId, key);
}

//custom_node.cpp
void CustomNode::Build()
{
    Render();
    UINode::Build();
}

void CustomNode::Render()
{
	auto child = renderFunction();
	if (child) {
		child->MountToParent(Claim(this));
    }
}