From bedd598fc78a026cffb2c006c50332594c944e2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= <lihao.ylh@alibaba-inc.com>
Date: Wed, 21 Apr 2021 09:44:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(perf):=20=E4=BC=98=E5=8C=96=E6=8F=92?=
 =?UTF-8?q?=E5=85=A5=20style=20=E8=8A=82=E7=82=B9=E7=9A=84=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91,=20=E9=81=BF=E5=85=8D=E6=97=A0=E6=84=8F=E4=B9=89?=
 =?UTF-8?q?=E7=9A=84=E5=88=A0=E9=99=A4=E5=92=8C=E6=8F=92=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/src/builtin-simulator/host.ts    |  2 +-
 .../src/transducers/addon-combine.ts          |  2 +-
 .../react-simulator-renderer/src/renderer.ts  |  2 +-
 .../src/props-reducers/style-reducer.ts       | 55 +++++++++++++------
 4 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
index bbcc36fce..49ae0f443 100644
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/packages/designer/src/builtin-simulator/host.ts
@@ -291,6 +291,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this._iframe = iframe;
 
     this._contentWindow = iframe.contentWindow!;
+    this._contentDocument = this._contentWindow.document;
 
     const library = this.get('library') as LibraryItem[];
     const libraryAsset: AssetList = this.buildLibrary();
@@ -337,7 +338,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     renderer.run();
 
     // init events, overlays
-    this._contentDocument = this._contentWindow.document;
     this.viewport.setScrollTarget(this._contentWindow);
     this.setupEvents();
 
diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts
index 2cf987523..7e8ba7c4b 100644
--- a/packages/editor-skeleton/src/transducers/addon-combine.ts
+++ b/packages/editor-skeleton/src/transducers/addon-combine.ts
@@ -59,7 +59,7 @@ export default function (metadata: TransformedComponentMetadata): TransformedCom
           },
           {
             description: '更新时',
-            name: 'componentDidMount',
+            name: 'componentDidUpdate',
           },
           {
             description: '卸载时',
diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
index 529992b50..455342822 100644
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/packages/react-simulator-renderer/src/renderer.ts
@@ -463,7 +463,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       container.id = containerId;
     }
 
-    // ==== compatiable vision
+    // ==== compatible vision
     document.documentElement.classList.add('engine-page');
     document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends
 
diff --git a/packages/vision-polyfill/src/props-reducers/style-reducer.ts b/packages/vision-polyfill/src/props-reducers/style-reducer.ts
index 9b74f2af7..5830e71cd 100644
--- a/packages/vision-polyfill/src/props-reducers/style-reducer.ts
+++ b/packages/vision-polyfill/src/props-reducers/style-reducer.ts
@@ -2,24 +2,28 @@ import { editor, designer } from '@ali/lowcode-engine';
 import { toCss } from '@ali/vu-css-style';
 
 export function stylePropsReducer(props: any, node: any) {
+  let cssId;
+  let cssClass;
+  let styleProp;
   if (props && typeof props === 'object' && props.__style__) {
-    const cssId = `_style_pesudo_${ node.id.replace(/\$/g, '_')}`;
-    const cssClass = `_css_pesudo_${ node.id.replace(/\$/g, '_')}`;
-    const styleProp = props.__style__;
+    cssId = `_style_pesudo_${node.id.replace(/\$/g, '_')}`;
+    cssClass = `_css_pesudo_${node.id.replace(/\$/g, '_')}`;
+    styleProp = props.__style__;
     appendStyleNode(props, styleProp, cssClass, cssId);
   }
   if (props && typeof props === 'object' && props.pageStyle) {
-    const cssId = '_style_pesudo_engine-document';
-    const cssClass = 'engine-document';
-    const styleProp = props.pageStyle;
+    cssId = '_style_pesudo_engine-document';
+    cssClass = 'engine-document';
+    styleProp = props.pageStyle;
     appendStyleNode(props, styleProp, cssClass, cssId);
   }
   if (props && typeof props === 'object' && props.containerStyle) {
-    const cssId = `_style_pesudo_${ node.id}`;
-    const cssClass = `_css_pesudo_${ node.id.replace(/\$/g, '_')}`;
-    const styleProp = props.containerStyle;
+    cssId = `_style_pesudo_${node.id}`;
+    cssClass = `_css_pesudo_${node.id.replace(/\$/g, '_')}`;
+    styleProp = props.containerStyle;
     appendStyleNode(props, styleProp, cssClass, cssId);
   }
+  props.className = cssClass;
   return props;
 }
 
@@ -28,21 +32,38 @@ function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: st
   if (!doc) {
     return;
   }
-  const dom = doc.getElementById(cssId);
-  if (dom) {
-    dom.parentNode?.removeChild(dom);
-  }
+  const dom = doc.getElementById(cssId) as HTMLStyleElement;
   if (typeof styleProp === 'object') {
     styleProp = toCss(styleProp);
   }
   if (typeof styleProp === 'string') {
+    const newStyleStr = transformStyleStr(styleProp, cssClass);
+    if (dom && stringEquals(dom.textContent!, newStyleStr)) {
+      return;
+    }
+    if (dom) {
+      dom.parentNode?.removeChild(dom);
+    }
     const s = doc.createElement('style');
-    props.className = cssClass;
     s.setAttribute('type', 'text/css');
     s.setAttribute('id', cssId);
     doc.getElementsByTagName('head')[0].appendChild(s);
-    s.appendChild(doc.createTextNode(styleProp.replace(/(\d+)rpx/g, (a, b) => {
-      return `${b / 2}px`;
-    }).replace(/:root/g, `.${cssClass}`)));
+    s.appendChild(doc.createTextNode(newStyleStr));
   }
 }
+
+function stringEquals(str: string, targetStr: string): boolean {
+  return removeWhitespace(str) === removeWhitespace(targetStr);
+}
+
+function removeWhitespace(str: string = ''): string {
+  return str.replace(/\s/g, '');
+}
+
+function transformStyleStr(styleStr: string = '', cssClass: string): string {
+  return styleStr
+    .replace(/(\d+)rpx/g, (all, num) => {
+      return `${num / 2}px`;
+    })
+    .replace(/:root/g, `.${cssClass}`);
+}