From a10b2423eaae0d4c1076aaf57383f836526ec8c5 Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 23 Feb 2022 16:22:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=AE=BE=E5=A4=87=E7=B1=BB=E5=9E=8B=E6=97=B6?= =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E9=85=8D=E7=BD=AE=E5=9C=A8=E7=94=BB?= =?UTF-8?q?=E5=B8=83=E4=B8=AD=E4=B8=8D=E7=94=9F=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/renderer-core/src/hoc/leaf.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx index abc92acd3..9a3c62f5c 100644 --- a/packages/renderer-core/src/hoc/leaf.tsx +++ b/packages/renderer-core/src/hoc/leaf.tsx @@ -5,7 +5,6 @@ import { EngineOptions } from '@ali/lowcode-editor-core'; import adapter from '../adapter'; import * as types from '../types/index'; - export interface IComponentHocInfo { schema: any; baseRenderer: types.IBaseRendererInstance; @@ -17,7 +16,7 @@ type DesignMode = Pick['designMode']; export type IComponentHoc = { designMode: DesignMode | DesignMode[]; - hoc: IComponentConstruct, + hoc: IComponentConstruct; }; export type IComponentConstruct = (Comp: types.IBaseRenderer, info: IComponentHocInfo) => types.Constructor; @@ -44,7 +43,7 @@ enum RerenderType { // 缓存 Leaf 层组件，防止重新渲染问题 class LeafCache { - constructor(public documentId: string) { + constructor(public documentId: string, public device: 'mobile' | 'web') { } /** 组件缓存 */ component = new Map(); @@ -126,6 +125,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, { const engine = baseRenderer.context.engine; const host: BuiltinSimulatorHost = baseRenderer.props.__host; const curDocumentId = baseRenderer.props?.documentId; + const curDevice = baseRenderer.props?.device; const getNode = baseRenderer.props?.getNode; const container: BuiltinSimulatorHost = baseRenderer.props.__container; const setSchemaChangedSymbol = baseRenderer.props?.setSchemaChangedSymbol; @@ -134,11 +134,11 @@ export function leafWrapper(Comp: types.IBaseRenderer, { const componentCacheId = schema.id; - if (!cache || (curDocumentId && curDocumentId !== cache.documentId)) { + if (!cache || (curDocumentId && curDocumentId !== cache.documentId) || (curDevice && curDevice !== cache.device)) { cache?.event.forEach(event => { event.dispose?.forEach((disposeFn: any) => disposeFn && disposeFn()); }); - cache = new LeafCache(curDocumentId); + cache = new LeafCache(curDocumentId, curDevice); } if (!isReactComponent(Comp)) { @@ -262,9 +262,9 @@ export function leafWrapper(Comp: types.IBaseRenderer, { } renderUnitInfo: { - minimalUnitId?: string, + minimalUnitId?: string; minimalUnitName?: string; - singleRender?: boolean, + singleRender?: boolean; }; shouldRenderSingleNode(): boolean { From fb749d7a041330cd5f1d3bf16187f61343c28b13 Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 23 Feb 2022 16:29:46 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=9C=80=E5=B0=8F=E6=B8=B2=E6=9F=93=E5=8D=95=E5=85=83=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=AD=90=E7=BB=84=E4=BB=B6=E4=BC=9A=E5=87=BA?= =?UTF-8?q?=E7=8E=B0=E8=BE=93=E5=85=A5=E5=8D=A1=E9=A1=BF=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/renderer-core/src/hoc/leaf.tsx | 47 ++++++++++++++----------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx index 9a3c62f5c..4534812bf 100644 --- a/packages/renderer-core/src/hoc/leaf.tsx +++ b/packages/renderer-core/src/hoc/leaf.tsx @@ -2,6 +2,7 @@ import { BuiltinSimulatorHost, Node, PropChangeOptions } from '@ali/lowcode-desi import { GlobalEvent, TransformStage } from '@ali/lowcode-types'; import { isReactComponent, cloneEnumerableProperty } from '@ali/lowcode-utils'; import { EngineOptions } from '@ali/lowcode-editor-core'; +import { debounce } from '../utils/common'; import adapter from '../adapter'; import * as types from '../types/index'; @@ -267,15 +268,17 @@ export function leafWrapper(Comp: types.IBaseRenderer, { singleRender?: boolean; }; - shouldRenderSingleNode(): boolean { + judgeMiniUnitRender() { if (!this.renderUnitInfo) { this.getRenderUnitInfo(); } - const renderUnitInfo = this.renderUnitInfo; + const renderUnitInfo = this.renderUnitInfo || { + singleRender: true, + }; if (renderUnitInfo.singleRender) { - return true; + return; } const ref = cache.ref.get(renderUnitInfo.minimalUnitId); @@ -283,29 +286,32 @@ export function leafWrapper(Comp: types.IBaseRenderer, { if (!ref) { __debug('Cant find minimalRenderUnit ref! This make rerender!'); container.rerender(); - return false; + return; } __debug(`${this.leaf?.componentName}(${this.props.componentId}) need render, make its minimalRenderUnit ${renderUnitInfo.minimalUnitName}(${renderUnitInfo.minimalUnitId})`); ref.makeUnitRender(); - - return false; } getRenderUnitInfo(leaf = this.leaf) { - if (leaf?.isRoot()) { + // leaf 在低代码组件中存在 mock 的情况，退出最小渲染单元判断 + if (!leaf || typeof leaf.isRoot !== 'function') { + return; + } + + if (leaf.isRoot()) { this.renderUnitInfo = { singleRender: true, ...(this.renderUnitInfo || {}), }; } - if (leaf?.componentMeta.isMinimalRenderUnit) { + if (leaf.componentMeta.isMinimalRenderUnit) { this.renderUnitInfo = { minimalUnitId: leaf.id, minimalUnitName: leaf.componentName, singleRender: false, }; } - if (leaf?.hasLoop()) { + if (leaf.hasLoop()) { // 含有循环配置的元素，父元素是最小渲染单元 this.renderUnitInfo = { minimalUnitId: leaf?.parent?.id, @@ -313,12 +319,13 @@ export function leafWrapper(Comp: types.IBaseRenderer, { singleRender: false, }; } - if (leaf?.parent) { + if (leaf.parent) { this.getRenderUnitInfo(leaf.parent); } } - makeUnitRender = () => { + // 最小渲染单元做防抖处理 + makeUnitRenderDebounced = debounce(() => { this.beforeRender(RerenderType.MinimalRenderUnit); const nextProps = getProps(this.leaf?.export?.(TransformStage.Render) as types.ISchema, scope, Comp, componentInfo); const children = getChildren(this.leaf?.export?.(TransformStage.Render) as types.ISchema, scope, Comp); @@ -333,6 +340,10 @@ export function leafWrapper(Comp: types.IBaseRenderer, { __debug(`${this.leaf?.componentName}(${this.props.componentId}) MinimalRenderUnit Render!`); this.setState(nextState); + }, 20); + + makeUnitRender = () => { + this.makeUnitRenderDebounced(); }; componentWillReceiveProps(nextProps: any) { @@ -376,9 +387,6 @@ export function leafWrapper(Comp: types.IBaseRenderer, { cache.component.delete(componentCacheId); return; } - if (!this.shouldRenderSingleNode()) { - return; - } this.beforeRender(RerenderType.PropsChanged); const state = this.state; const nodeCacheProps = state.nodeCacheProps; @@ -397,6 +405,8 @@ export function leafWrapper(Comp: types.IBaseRenderer, { nodeProps, nodeCacheProps, }); + + this.judgeMiniUnitRender(); }); dispose && this.disposeFunctions.push(dispose); @@ -411,15 +421,12 @@ export function leafWrapper(Comp: types.IBaseRenderer, { return; } - if (!this.shouldRenderSingleNode()) { - return; - } - __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange(${flag}) event`); this.beforeRender(RerenderType.VisibleChanged); this.setState({ visible: flag, }); + this.judgeMiniUnitRender(); }); dispose && this.disposeFunctions.push(dispose); @@ -434,9 +441,6 @@ export function leafWrapper(Comp: types.IBaseRenderer, { type, node, } = param || {}; - if (!this.shouldRenderSingleNode()) { - return; - } this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node); // TODO: 缓存同级其他元素的 children。 // 缓存二级 children Next 查询筛选组件有问题 @@ -448,6 +452,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, { childrenInState: true, }); }); + this.judgeMiniUnitRender(); dispose && this.disposeFunctions.push(dispose); }