ArkUI JS层

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 ancestorsprotected 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));}
}