From e3d265e0d5b729d3901a9ff676ef183350a557d8 Mon Sep 17 00:00:00 2001 From: "liujuping.liujupin" Date: Sat, 9 Oct 2021 14:30:41 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=97=A0=E6=B3=95=E6=92=A4=E9=94=80=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/src/document/document-model.ts | 2 +- .../src/renderer-view.tsx | 3 +- .../src/renderer-view.tsx | 3 +- packages/renderer-core/src/hoc/leaf.tsx | 101 +++++++++++++----- packages/renderer-core/src/renderer/addon.tsx | 2 +- packages/renderer-core/src/renderer/base.tsx | 12 ++- packages/renderer-core/src/renderer/block.tsx | 2 +- .../renderer-core/src/renderer/component.tsx | 2 +- packages/renderer-core/src/renderer/page.tsx | 2 +- packages/renderer-core/src/renderer/temp.tsx | 2 +- packages/renderer-core/src/types/index.ts | 1 + 11 files changed, 95 insertions(+), 37 deletions(-) diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index 6b9e70f13..c493da22d 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -198,7 +198,7 @@ export class DocumentModel { * 根据 id 获取节点 */ getNodeCount(): number { - return this._nodesMap.size; + return this._nodesMap?.size; } /** diff --git a/packages/rax-simulator-renderer/src/renderer-view.tsx b/packages/rax-simulator-renderer/src/renderer-view.tsx index 711053e80..8444e73ef 100644 --- a/packages/rax-simulator-renderer/src/renderer-view.tsx +++ b/packages/rax-simulator-renderer/src/renderer-view.tsx @@ -187,7 +187,7 @@ class Renderer extends Component<{ render() { const { documentInstance } = this.props; - const { container } = documentInstance; + const { container, document } = documentInstance; const { designMode, device } = container; const { rendererContainer: renderer } = this.props; this.startTime = Date.now(); @@ -209,6 +209,7 @@ class Renderer extends Component<{ onCompGetRef={(schema: any, ref: any) => { documentInstance.mountInstance(schema.id, ref); }} + documentId={document.id} getNode={(id: string) => documentInstance.getNode(id) as any} customCreateElement={(Component: any, props: any, children: any) => { const { __id, ...viewProps } = props; diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index 3c0978aa3..ec1ebdf4e 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -154,7 +154,7 @@ class Renderer extends Component<{ render() { const { documentInstance, rendererContainer: renderer } = this.props; - const { container } = documentInstance; + const { container, document } = documentInstance; const { designMode, device, locale } = container; const messages = container.context?.utils?.i18n?.messages || {}; this.startTime = Date.now(); @@ -172,6 +172,7 @@ class Renderer extends Component<{ appHelper={container.context} designMode={designMode} device={device} + documentId={document.id} suspended={renderer.suspended} self={renderer.scope} getNode={(id: string) => documentInstance.getNode(id) as Node} diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx index f40522a58..c6dde182f 100644 --- a/packages/renderer-core/src/hoc/leaf.tsx +++ b/packages/renderer-core/src/hoc/leaf.tsx @@ -50,16 +50,30 @@ enum RerenderType { } // 缓存 Leaf 层组件，防止重新渲染问题 -const leafComponentCache: { +let leafComponentCaches: { [componentName: string]: any; } = {}; + +let cacheDocumentId: any; + +function clearCaches(curDocumentId: any, { + __debug, +}: any) { + if (cacheDocumentId === curDocumentId) { + return; + } + __debug(`DocumentId changed to ${curDocumentId}, clear caches!`); + cacheDocumentId = curDocumentId; + leafComponentCaches = {}; +} + // 缓存导致 rerender 的订阅事件 const rerenderEventCache: { [componentId: string]: any; } = {}; /** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */ -function makeRerenderEvent({ +function initRerenderEvent({ schema, __debug, container, @@ -98,6 +112,7 @@ function clearRerenderEvent(id: string): void { if (!rerenderEventCache[id]) { rerenderEventCache[id] = { clear: true, + dispose: [], }; return; } @@ -119,27 +134,34 @@ export function leafWrapper(Comp: types.IBaseRenderer, { } = baseRenderer; const engine = baseRenderer.context.engine; const host: BuiltinSimulatorHost = baseRenderer.props.__host; + const curDocumentId = baseRenderer.props?.documentId; const getNode = baseRenderer.props?.getNode; const container: BuiltinSimulatorHost = baseRenderer.props.__container; const editor = host?.designer?.editor; - const { Component } = adapter.getRuntime(); + const { Component, forwardRef } = adapter.getRuntime(); + + if (curDocumentId !== cacheDocumentId) { + clearCaches(curDocumentId, { + __debug, + }); + } if (!isReactComponent(Comp)) { console.error(`${schema.componentName} component may be has errors: `, Comp); } - makeRerenderEvent({ + initRerenderEvent({ schema, __debug, container, getNode, }); - if (leafComponentCache[schema.componentName]) { - return leafComponentCache[schema.componentName]; + if (leafComponentCaches[schema.componentName]) { + return leafComponentCaches[schema.componentName]; } - class LeafWrapper extends Component { + class LeafHoc extends Component { recordInfo: { startTime?: number | null; type?: string; @@ -156,7 +178,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, { return; } const endTime = Date.now(); - const nodeCount = host.designer.currentDocument?.getNodeCount?.(); + const nodeCount = host?.designer?.currentDocument?.getNodeCount?.(); const componentName = this.recordInfo.node?.componentName || this.leaf?.componentName || 'UnknownComponent'; editor?.emit(GlobalEvent.Node.Rerender, { componentName, @@ -171,18 +193,39 @@ export function leafWrapper(Comp: types.IBaseRenderer, { this.recordTime(); } + componentDidMount() { + this.recordTime(); + } + + get childrenMap(): any { + const map = new Map(); + + if (!this.hasChildren) { + return map; + } + + this.children.forEach((d: any) => { + if (Array.isArray(d)) { + map.set(d[0].props.componentId, d); + return; + } + map.set(d.props.componentId, d); + }); + + return map; + } + constructor(props: IProps, context: any) { super(props, context); // 监听以下事件，当变化时更新自己 - clearRerenderEvent(schema.id); + __debug(`${schema.componentName}[${this.props.componentId}] leaf render in SimulatorRendererView`); + clearRerenderEvent(this.props.componentId); this.initOnPropsChangeEvent(); this.initOnChildrenChangeEvent(); this.initOnVisibleChangeEvent(); - __debug(`${schema.componentName}[${schema.id}] leaf render in SimulatorRendererView`); this.state = { nodeChildren: null, childrenInState: false, - __tag: props.__tag, }; } @@ -198,17 +241,11 @@ export function leafWrapper(Comp: types.IBaseRenderer, { // } componentWillReceiveProps(nextProps: any) { - const { _leaf, __tag, children, ...rest } = nextProps; - if (nextProps.__tag === this.state.__tag) { - const nextProps = getProps(this.leaf?.export?.(TransformStage.Render) as types.ISchema, Comp, componentInfo); - this.setState({ - nodeProps: { - ...rest, - ...nextProps, - }, - }); + const { _leaf } = nextProps; + if (nextProps.__tag === this.props.__tag) { return null; } + if (_leaf && this.leaf && _leaf !== this.leaf) { this.disposeFunctions.forEach(fn => fn()); this.disposeFunctions = []; @@ -218,10 +255,9 @@ export function leafWrapper(Comp: types.IBaseRenderer, { } this.setState({ - nodeChildren: children, - nodeProps: rest, - childrenInState: true, - __tag, + nodeChildren: null, + nodeProps: {}, + childrenInState: false, }); } @@ -300,7 +336,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, { // } this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node); __debug(`${leaf} component trigger onChildrenChange event`); - const nextChild = getChildren(leaf?.export?.(TransformStage.Render) as types.ISchema, Comp); + const nextChild = getChildren(leaf?.export?.(TransformStage.Render) as types.ISchema, Comp, this.childrenMap); this.setState({ nodeChildren: nextChild, childrenInState: true, @@ -359,17 +395,28 @@ export function leafWrapper(Comp: types.IBaseRenderer, { return null; } + const { + ref, + ...rest + } = this.props; + const compProps = { - ...this.props, + ...rest, ...(this.state.nodeProps || {}), children: [], __id: this.props.componentId, + ref: this.props.forwardedRef, }; return engine.createElement(Comp, compProps, this.hasChildren ? this.children : null); } } + const LeafWrapper = forwardRef((props: any, ref: any) => ( + // @ts-ignore + + )); + if (typeof Comp === 'object') { const compExtraPropertyNames = Object.getOwnPropertyNames(Comp).filter(d => !compDefaultPropertyNames.includes(d)); @@ -382,7 +429,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, { LeafWrapper.displayName = (Comp as any).displayName; - leafComponentCache[schema.componentName] = LeafWrapper; + leafComponentCaches[schema.componentName] = LeafWrapper; return LeafWrapper; } \ No newline at end of file diff --git a/packages/renderer-core/src/renderer/addon.tsx b/packages/renderer-core/src/renderer/addon.tsx index cedb3e065..7720051a4 100644 --- a/packages/renderer-core/src/renderer/addon.tsx +++ b/packages/renderer-core/src/renderer/addon.tsx @@ -77,7 +77,7 @@ export default function addonRendererFactory() { return '插件 schema 结构异常！'; } - this.__debug(`render - ${__schema.fileName}`); + this.__debug(`${AddonRenderer.dislayName} render - ${__schema.fileName}`); this.__generateCtx({ component: this, }); diff --git a/packages/renderer-core/src/renderer/base.tsx b/packages/renderer-core/src/renderer/base.tsx index 87f4ad919..f234677ac 100644 --- a/packages/renderer-core/src/renderer/base.tsx +++ b/packages/renderer-core/src/renderer/base.tsx @@ -521,7 +521,7 @@ export default function baseRenererFactory() { props.key = props.__id; } - let child: any = this.__getSchemaChildrenVirtualDom(schema, Comp); + let child: any = parentInfo.componentChildren || this.__getSchemaChildrenVirtualDom(schema, Comp); const renderComp = (props: any) => engine.createElement(Comp, props, child); // 设计模式下的特殊处理 if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) { @@ -580,7 +580,7 @@ export default function baseRenererFactory() { .map((d: IComponentHoc) => d.hoc); } - __getSchemaChildrenVirtualDom = (schema: ISchema, Comp: any) => { + __getSchemaChildrenVirtualDom = (schema: ISchema, Comp: any, childrenMap?: Map) => { let _children = this.getSchemaChildren(schema); let children: any = []; @@ -596,6 +596,8 @@ export default function baseRenererFactory() { { schema, Comp, + // 有 childrenMap 情况下，children 只计算第一层，不需要遍历多层。 + componentChildren: childrenMap?.get(_child.id)?.props.children || null, }, ); @@ -834,11 +836,16 @@ export default function baseRenererFactory() { componentInfo: {}, }); const { className } = data; + const otherProps: any = {}; const { engine } = this.context || {}; if (!engine) { return null; } + if (this._designModeIsDesign) { + otherProps.__tag = Math.random(); + } + const child = engine.createElement( Comp, { @@ -847,6 +854,7 @@ export default function baseRenererFactory() { ref: this.__getRef, className: classnames(getFileCssName(__schema?.fileName), className, this.props.className), __id: __schema?.id, + ...otherProps, }, this.__createDom(), ); diff --git a/packages/renderer-core/src/renderer/block.tsx b/packages/renderer-core/src/renderer/block.tsx index 599410c4d..d6d230c4d 100644 --- a/packages/renderer-core/src/renderer/block.tsx +++ b/packages/renderer-core/src/renderer/block.tsx @@ -23,7 +23,7 @@ export default function blockRendererFactory() { return '区块 schema 结构异常！'; } - this.__debug(`render - ${__schema.fileName}`); + this.__debug(`${BlockRenderer.dislayName} render - ${__schema.fileName}`); this.__generateCtx({}); this.__render(); diff --git a/packages/renderer-core/src/renderer/component.tsx b/packages/renderer-core/src/renderer/component.tsx index 229958f46..81b40dc32 100644 --- a/packages/renderer-core/src/renderer/component.tsx +++ b/packages/renderer-core/src/renderer/component.tsx @@ -23,7 +23,7 @@ export default function componentRendererFactory() { if (this.__checkSchema(__schema)) { return '自定义组件 schema 结构异常！'; } - this.__debug(`render - ${__schema.fileName}`); + this.__debug(`${CompRenderer.dislayName} render - ${__schema.fileName}`); this.__generateCtx({ component: this, diff --git a/packages/renderer-core/src/renderer/page.tsx b/packages/renderer-core/src/renderer/page.tsx index 3c7be518f..6e7f290ed 100644 --- a/packages/renderer-core/src/renderer/page.tsx +++ b/packages/renderer-core/src/renderer/page.tsx @@ -36,7 +36,7 @@ export default function pageRendererFactory() { if (this.__checkSchema(__schema)) { return '页面schema结构异常！'; } - this.__debug(`render - ${__schema.fileName}`); + this.__debug(`${PageRenderer.dislayName} render - ${__schema.fileName}`); this.__bindCustomMethods(this.props); this.__initDataSource(this.props); diff --git a/packages/renderer-core/src/renderer/temp.tsx b/packages/renderer-core/src/renderer/temp.tsx index fc3e3c48d..061e561b2 100644 --- a/packages/renderer-core/src/renderer/temp.tsx +++ b/packages/renderer-core/src/renderer/temp.tsx @@ -48,7 +48,7 @@ export default function tempRendererFactory() { return '下钻编辑 schema 结构异常！'; } - this.__debug(`render - ${__schema.fileName}`); + this.__debug(`${TempRenderer.dislayName} render - ${__schema.fileName}`); return this.__renderContent(this.__renderContextProvider({ __ctx })); } diff --git a/packages/renderer-core/src/types/index.ts b/packages/renderer-core/src/types/index.ts index e5e68cf3b..e1246082a 100644 --- a/packages/renderer-core/src/types/index.ts +++ b/packages/renderer-core/src/types/index.ts @@ -63,6 +63,7 @@ export interface IInfo { schema: ISchema; Comp: any; componentInfo?: any; + componentChildren?: any } export interface JSExpression {