From 99fac5512de162b2d28fec0e84a4f21a3cef8b6e Mon Sep 17 00:00:00 2001
From: "mario.gk" <mario.gk@alibaba-inc.com>
Date: Tue, 28 Jul 2020 14:04:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=8E=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A4=84=E7=90=86=20modal=20node=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B8=B2=E6=9F=93=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-simulator-renderer/src/renderer.ts  | 81 +++++++++++++------
 1 file changed, 58 insertions(+), 23 deletions(-)

diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
index afe970ef7..399432aa0 100644
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/packages/react-simulator-renderer/src/renderer.ts
@@ -219,16 +219,19 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
     _schema.methods = {};
     _schema.lifeCycles = {};
 
-    const processPropsSchema = (propsSchema: any, propsMap: any): any => {
+    const processPropsSchema = (propsSchema: any, propsMap: any, node: any): any => {
       if (!propsSchema) {
         return {};
       }
 
-      const result = { ...propsSchema };
+      let result = { ...propsSchema };
+      result = host.document.designer.transformProps(result, node, TransformStage.Init);
+      result = host.document.designer.transformProps(result, node, TransformStage.Upgrade);
+
       const reg = /^(?:this\.props|props)\.(\S+)$/;
-      Object.keys(propsSchema).map((key: string) => {
-        if (propsSchema[key].type === 'JSExpression') {
-          const { value } = propsSchema[key];
+      Object.keys(result).map((key: string) => {
+        if (result[key].type === 'JSExpression') {
+          const { value } = result[key];
           const matched = reg.exec(value);
           if (matched) {
             const propName = matched[1];
@@ -236,32 +239,64 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
           }
         }
       });
+
+      result = host.document.designer.transformProps(result, node, TransformStage.Render);
       return result;
     };
 
-    const getElement = (componentsMap: any, schema: any, propsMap: any): ReactElement => {
-      const Com = componentsMap[schema.componentName];
-      let children = null;
-      if (schema.children && schema.children.length > 0) {
-        children = schema.children.map((item: any) => getElement(componentsMap, item, propsMap));
-      }
-      const _leaf = host.document.designer.currentDocument?.createNode(schema);
-      const node = host.document.createNode(schema);
-      let { props } = schema;
-      props = host.document.designer.transformProps(props, node, TransformStage.Init);
-      props = host.document.designer.transformProps(props, node, TransformStage.Upgrade);
-      props = processPropsSchema(props, propsMap);
-      props = host.document.designer.transformProps(props, node, TransformStage.Render);
-      return createElement(Com, { ...props, _leaf }, children);
-    };
-
     const renderer = this;
+    const componentsMap = renderer.componentsMap;
+
+    class Ele extends React.Component<{ schema: any, propsMap: any }> {
+      private isModal: boolean;
+      private node: any;
+      private renderProps: any;
+
+      constructor(props: any){
+        super(props);
+        const componentMeta = host.document.getComponentMeta(props.schema.componentName);
+        if (componentMeta?.prototype?.isModal()) {
+          this.isModal = true;
+          return;
+        }
+        this.node = host.document.createNode(props.schema);
+        this.renderProps = processPropsSchema(props.schema.props, props.propsMap, this.node);
+      }
+
+      shouldComponentUpdate(nextProps: any) {
+        if (this.isModal) {
+          return false;
+        }
+        const renderProps = processPropsSchema(nextProps.schema.props, nextProps.propsMap, this.node);
+        if (renderProps && this.renderProps && JSON.stringify({...renderProps, fieldId: ''}) === JSON.stringify({...this.renderProps, fieldId: ''})) {
+          return false;
+        }
+        this.renderProps = renderProps;
+        return true;
+      }
+
+      render() {
+        if (this.isModal) {
+          return null;
+        }
+        const { schema, propsMap } = this.props;
+        const { node } = this;
+        const Com = componentsMap[schema.componentName];
+        let children = null;
+        if (schema.children && schema.children.length > 0) {
+          children = schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
+        }
+
+        return createElement(Com, { ...this.renderProps, _leaf: node }, children);
+      }
+    }
+
     class Com extends React.Component {
       render() {
-        const componentsMap = renderer.componentsMap;
         let children = null;
+        const propsMap = this.props;
         if (_schema.children && Array.isArray(_schema.children)) {
-          children = _schema.children?.map((item: any) => getElement(componentsMap, item, this.props));
+          children = _schema.children?.map((item: any) => createElement(Ele, {schema: item, propsMap}));
         }
         return createElement(React.Fragment, {}, children);
       }