Merge branch feat/mobx-rendererPerformanceOptimization into release/1.0.69

Title: fix: 部分组件属性修改不生效问题 

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/6616866

packages/react-simulator-renderer/src/renderer.ts

@@ -16,9 +16,8 @@ import {
   isPlainObject,
   AssetLoader,
   getProjectUtils,
-  applyActivities,
 } from '@ali/lowcode-utils';
-import { RootSchema, ComponentSchema, TransformStage, NodeSchema, ActivityType, ActivityData } from '@ali/lowcode-types';
+import { ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types';
 // just use types
 import { BuiltinSimulatorRenderer, NodeInstance, Component, DocumentModel, Node } from '@ali/lowcode-designer';
 import LowCodeRenderer from '@ali/lowcode-react-renderer';
@@ -28,8 +27,6 @@ import Leaf from './builtin-components/leaf';
 import { withQueryParams, parseQuery } from './utils/url';
 
 const loader = new AssetLoader();
-const DELAY_THRESHOLD = 10;
-const FULL_RENDER_THRESHOLD = 500;
 configure({ enforceActions: 'never' });
 
 export class DocumentInstance {
@@ -447,16 +444,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
 
     class LowCodeComp extends React.Component<any, any> {
       render() {
-        const newSchema = host.designer.transformProps(_schema as any, {
-          componentMeta: {
-            prototype: 'lowcodeComp',
-          },
-          isRoot: () => false,
-        } as Node, TransformStage.Render);
         const extraProps = getLowCodeComponentProps(this.props);
         return createElement(LowCodeRenderer, {
           ...extraProps, // 防止覆盖下面内置属性
-          schema: newSchema,
+          // 使用 _schema 为了使低代码组件在页面设计中使用变量，同 react 组件使用效果一致
+          schema: _schema,
           components: renderer.components,
           designMode: renderer.designMode,
           device: renderer.device,

packages/renderer-core/src/hoc/leaf.tsx

@@ -26,7 +26,6 @@ export type IComponentHoc = {
 };
 
 export type IComponentConstruct = (Comp: types.IBaseRenderer, info: IComponentHocInfo) => types.Constructor;
-
 // const whitelist: string[] = [];
 
 interface IProps {
@@ -50,6 +49,63 @@ enum RerenderType {
   I18nChanged = 'I18nChanged',
 }
 
+// 缓存 Leaf 层组件，防止重新渲染问题
+const leafComponentCache: {
+  [componentName: string]: any;
+} = {};
+// 缓存导致 rerender 的订阅事件
+const rerenderEventCache: {
+  [componentId: string]: any;
+} = {};
+
+/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
+function makeRerenderEvent({
+  schema,
+  __debug,
+  container,
+  getNode,
+}: any) {
+  const leaf = getNode?.(schema.id);
+  if (!leaf
+    || rerenderEventCache[schema.id]?.clear
+    || leaf === rerenderEventCache[schema.id]?.leaf
+  ) {
+    return;
+  }
+  rerenderEventCache[schema.id]?.dispose.forEach((d: any) => d && d());
+  rerenderEventCache[schema.id] = {
+    clear: false,
+    leaf,
+    dispose: [
+      leaf?.onPropChange?.(() => {
+        __debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`);
+        container.rerender();
+      }),
+      leaf?.onChildrenChange?.(() => {
+        __debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`);
+        container.rerender();
+      }) as Function,
+      leaf?.onVisibleChange?.(() => {
+        __debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`);
+        container.rerender();
+      }),
+    ],
+  };
+}
+
+/** 渲染的 node 节点全局注册事件清除 */
+function clearRerenderEvent(id: string): void {
+  if (!rerenderEventCache[id]) {
+    rerenderEventCache[id] = {
+      clear: true,
+    };
+    return;
+  }
+  rerenderEventCache[id].dispose.forEach((d: any) => d && d());
+  rerenderEventCache[id].dispose = [];
+  rerenderEventCache[id].clear = true;
+}
+
 // 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染
 export function leafWrapper(Comp: types.IBaseRenderer, {
   schema,
@@ -72,16 +128,15 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
     console.error(`${schema.componentName} component may be has errors: `, Comp);
   }
 
-  /** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
-  let wrapDisposeFunctions: Function[] = [];
-  if (getNode) {
-    const leaf = getNode(schema.id);
+  makeRerenderEvent({
+    schema,
+    __debug,
+    container,
+    getNode,
+  });
 
-    wrapDisposeFunctions = [
-      leaf?.onPropsChange?.(() => container.rerender()),
-      leaf?.onChildrenChange?.(() => container.rerender()),
-      leaf?.onVisibleChange?.(() => container.rerender()),
-    ];
+  if (leafComponentCache[schema.componentName]) {
+    return leafComponentCache[schema.componentName];
   }
 
   class LeafWrapper extends Component {
@@ -94,6 +149,8 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
 
     disposeFunctions: ((() => void) | Function)[] = [];
 
+    __component_tag = 'leafWrapper';
+
     recordTime = () => {
       if (!this.recordInfo.startTime) {
         return;
@@ -117,10 +174,11 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
     constructor(props: IProps, context: any) {
       super(props, context);
       // 监听以下事件，当变化时更新自己
+      clearRerenderEvent(schema.id);
       this.initOnPropsChangeEvent();
       this.initOnChildrenChangeEvent();
       this.initOnVisibleChangeEvent();
-      wrapDisposeFunctions.forEach(d => d && d());
+      __debug(`${schema.componentName}[${schema.id}] leaf render in SimulatorRendererView`);
       this.state = {
         nodeChildren: null,
         childrenInState: false,
@@ -324,5 +382,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
 
   LeafWrapper.displayName = (Comp as any).displayName;
 
+  leafComponentCache[schema.componentName] = LeafWrapper;
+
   return LeafWrapper;
 }

packages/renderer-core/src/renderer/base.tsx

@@ -62,8 +62,6 @@ export default function baseRenererFactory() {
 
     static contextType = AppContext;
 
-    __hoc_components: any = {};
-
     __namespace = 'base';
 
     _self: any = null;
@@ -481,28 +479,20 @@ export default function baseRenererFactory() {
           props: transformArrayToMap(componentInfo.props, 'name'),
         }) || {};
 
-        if (!this.__hoc_components[schema.componentName]) {
-          this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
-            Comp = ComponentConstruct(Comp, {
-              schema,
-              componentInfo,
-              baseRenderer: this,
-            });
+        this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
+          Comp = ComponentConstruct(Comp, {
+            schema,
+            componentInfo,
+            baseRenderer: this,
           });
-        }
+        });
 
         // 对于可以获取到ref的组件做特殊处理
-        if (!acceptsRef(Comp) && !this.__hoc_components[schema.componentName]) {
+        if (!acceptsRef(Comp)) {
           Comp = compWrapper(Comp);
           components[schema.componentName] = Comp;
         }
 
-        if (!this.__hoc_components[schema.componentName]) {
-          this.__hoc_components[schema.componentName] = Comp;
-        } else {
-          Comp = this.__hoc_components[schema.componentName];
-        }
-
         otherProps.ref = (ref: any) => {
           this.$(props.fieldId || props.ref, ref); // 收集ref
           const refProps = props.ref;
@@ -824,18 +814,13 @@ export default function baseRenererFactory() {
     };
 
     __getHocComp(Comp: any, schema: any) {
-      if (!this.__hoc_components[schema.componentName]) {
-        this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
-          Comp = ComponentConstruct(Comp || Div, {
-            schema,
-            componentInfo: {},
-            baseRenderer: this,
-          });
+      this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
+        Comp = ComponentConstruct(Comp || Div, {
+          schema,
+          componentInfo: {},
+          baseRenderer: this,
         });
-        this.__hoc_components[schema.componentName] = Comp;
-      } else {
-        Comp = this.__hoc_components[schema.componentName];
-      }
+      });
 
       return Comp;
     }