From fb749d7a041330cd5f1d3bf16187f61343c28b13 Mon Sep 17 00:00:00 2001
From: liujuping <liujuping.liujupin@alibaba-inc.com>
Date: Wed, 23 Feb 2022 16:29:46 +0800
Subject: [PATCH] =?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);
     }