perf: 提高编辑器性能 (baidu#9413)

lhtuling · Jan 12, 2024 · 8ac355b · 8ac355b
1 parent bddf9d1
commit 8ac355b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 25 deletions.
diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx
@@ -310,9 +310,12 @@ function AMISRenderer({
   }
 
   // 根据环境覆盖 schema，这个要在最前面做，不然就无法覆盖 validations
-  schema = envOverwrite(schema, locale);
-  // todo 和 envOverwrite 一起处理，减少循环次数
-  schema = replaceText(schema, options.replaceText, env.replaceTextIgnoreKeys);
+  schema = React.useMemo(() => {
+    schema = envOverwrite(schema, locale);
+    // todo 和 envOverwrite 一起处理，减少循环次数
+    schema = replaceText(schema, options.replaceText, env.replaceTextIgnoreKeys)
+    return schema;
+  }, [schema, locale]);
 
   return (
     <EnvContext.Provider value={env}>

diff --git a/packages/amis-core/src/renderers/wrapControl.tsx b/packages/amis-core/src/renderers/wrapControl.tsx
@@ -792,15 +792,16 @@ export function wrapControl<
           }
 
           getValue() {
-            const {formStore: data, $schema: control} = this.props;
+            const {formStore, data, $schema: control} = this.props;
             let value: any = this.model ? this.model.tmpValue : control.value;
 
             if (control.pipeIn) {
               value = callStrFunction.call(
                 this,
                 control.pipeIn,
-                ['value', 'data'],
+                ['value', 'store', 'data'],
                 value,
+                formStore,
                 data
               );
             }

diff --git a/packages/amis-editor-core/src/store/editor.ts b/packages/amis-editor-core/src/store/editor.ts
@@ -133,6 +133,7 @@ export const MainStore = types
       id: 'root',
       label: 'Root'
     }),
+    map: types.optional(types.frozen(), {}),
     theme: 'cxd', // 主题，默认cxd主题
     hoverId: '',
     hoverRegion: '',
@@ -388,26 +389,29 @@ export const MainStore = types
         id: string,
         regionOrType?: string
       ): EditorNodeType | undefined {
-        let pool = self.root.children.concat();
-
-        while (pool.length) {
-          const item = pool.shift();
-          if (
-            item.id === id &&
-            (!regionOrType ||
-              item.region === regionOrType ||
-              item.type === regionOrType)
-          ) {
-            return item;
-          }
-
-          // 将当前节点的子节点全部放置到 pool中
-          if (item.children.length) {
-            pool.push.apply(pool, item.children);
-          }
-        }
+        const key = id + (regionOrType ? '-' + regionOrType : '');
+        return self.map[key];
+
+        // let pool = self.root.children.concat();
+
+        // while (pool.length) {
+        //   const item = pool.shift();
+        //   if (
+        //     item.id === id &&
+        //     (!regionOrType ||
+        //       item.region === regionOrType ||
+        //       item.type === regionOrType)
+        //   ) {
+        //     return item;
+        //   }
+
+        //   // 将当前节点的子节点全部放置到 pool中
+        //   if (item.children.length) {
+        //     pool.push.apply(pool, item.children);
+        //   }
+        // }
 
-        return undefined;
+        // return undefined;
       },
 
       get activeNodeInfo(): RendererInfo | null | undefined {
@@ -1054,6 +1058,33 @@ export const MainStore = types
     );
 
     return {
+      setNode(node: EditorNodeType) {
+        const map = {...self.map};
+
+        if (node.region) {
+          map[node.id + '-' + node.region] = node;
+        } else {
+          map[node.id] = node;
+          map[node.id + '-' + node.type] = node;
+        }
+
+        self.map = map;
+      },
+      unsetNode(node: EditorNodeType) {
+        const map = {...self.map};
+
+        if (node.region) {
+          map[node.id + '-' + node.region] === node &&
+            delete map[node.id + '-' + node.region];
+        } else {
+          map[node.id] === node && delete map[node.id];
+          map[node.id + '-' + node.type] === node &&
+            delete map[node.id + '-' + node.type];
+        }
+
+        self.map = map;
+      },
+
       setLayer(value: any) {
         layer = value;
       },
@@ -1958,6 +1989,7 @@ export const MainStore = types
       },
 
       beforeDestroy() {
+        self.map = {};
         lazyUpdateTargetName.cancel();
       }
     };

diff --git a/packages/amis-editor-core/src/store/node.ts b/packages/amis-editor-core/src/store/node.ts
@@ -614,11 +614,17 @@ export const EditorNode = types
         });
         const node = self.children[self.children.length - 1];
         node.setInfo(props.info);
+        (getRoot(self) as any).setNode(node);
         return node;
       },
 
       removeChild(child: any) {
         const idx = self.children.findIndex(item => item === child);
+        const node = self.children[idx];
+        if (!node) {
+          return;
+        }
+        (getRoot(self) as any).unsetNode(node);
         self.children.splice(idx, 1);
       },
 

diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx
@@ -744,7 +744,7 @@ export class TablePlugin extends BasePlugin {
       }));
     } else {
       // 只取10条预览，否则太多卡顿
-      props.value = arr.slice(0, 10);
+      props.value = arr.slice(0, 3);
     }
 
     // 编辑模式，不允许表格调整宽度