fix: add cache clear in react-component

VisActor · Jul 31, 2024 · b77f4a4 · b77f4a4
1 parent a06a0ca
commit b77f4a4
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/packages/react-vtable/src/components/custom/custom-layout.tsx b/packages/react-vtable/src/components/custom/custom-layout.tsx
@@ -37,13 +37,14 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
       if (container.current.has(key)) {
         const currentContainer = container.current.get(key);
         // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
-        reconcilorUpdateContainer(children, currentContainer, group, args);
+        reconcilorUpdateContainer(children, currentContainer, args);
         group = currentContainer.containerInfo;
+        // 这里更新group，可能会残留dx dy
       } else {
         group = new Group({});
         const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, 'custom', null, null);
         container.current.set(key, currentContainer);
-        reconcilorUpdateContainer(children, currentContainer, group, args);
+        reconcilorUpdateContainer(children, currentContainer, args);
         // const ele = React.cloneElement(children, { ...args });
         // reconcilor.updateContainer(ele, currentContainer, null);
       }
@@ -66,6 +67,14 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
     }
   }, []);
 
+  const removeAllContainer = useCallback(() => {
+    container.current.forEach((value, key) => {
+      const currentContainer = value;
+      reconcilor.updateContainer(null, currentContainer, null);
+    });
+    container.current.clear();
+  }, []);
+
   useLayoutEffect(() => {
     // init and release
     // eslint-disable-next-line no-undef
@@ -83,7 +92,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
     // eslint-disable-next-line no-undef
     console.log('update props', props, table);
 
-    table?.checkReactCustomLayout(); // init reactCustomLayout component
+    table?.checkReactCustomLayout(removeAllContainer); // init reactCustomLayout component
     if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {
       table.reactCustomLayout?.setReactCreateGraphic(
         componentId,
@@ -118,7 +127,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
         };
         // update element in container
         const group = currentContainer.containerInfo;
-        reconcilorUpdateContainer(children, currentContainer, group, args);
+        reconcilorUpdateContainer(children, currentContainer, args);
         // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
         table.scenegraph.updateNextFrame();
       });
@@ -128,7 +137,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
   return null;
 };
 
-function reconcilorUpdateContainer(children: ReactElement, currentContainer: any, group: typeof Group, args: any) {
+function reconcilorUpdateContainer(children: ReactElement, currentContainer: any, args: any) {
   reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
   // group = group.firstChild;
   // if (isReactElement(group.attribute.html?.dom)) {

diff --git a/packages/vtable/src/components/react/react-custom-layout.ts b/packages/vtable/src/components/react/react-custom-layout.ts
@@ -13,13 +13,15 @@ export function emptyCustomLayout(args: CustomRenderFunctionArg) {
 }
 
 export class ReactCustomLayout {
+  removeAllContainer: () => void;
   table: BaseTableAPI;
   customLayoutFuncCache: Map<string, ICustomLayoutFuc>;
   reactRemoveGraphicCache: Map<string, (col: number, row: number) => void>;
   headerCustomLayoutFuncCache: Map<string, ICustomLayoutFuc>;
   headerReactRemoveGraphicCache: Map<string, (col: number, row: number) => void>;
   // reactContainerCache: Map<number, Map<string, any>>;
-  constructor(table: BaseTableAPI) {
+  constructor(removeAllContainer: () => void, table: BaseTableAPI) {
+    this.removeAllContainer = removeAllContainer;
     this.table = table;
     this.customLayoutFuncCache = new Map();
     // this.reactContainerCache = new Map();
@@ -125,6 +127,10 @@ export class ReactCustomLayout {
       removeFun(col, row);
     }
   }
+
+  clearCache() {
+    this.removeAllContainer();
+  }
 }
 
 function getUpdateCustomCellRangeInListTable(componentId: string, table: BaseTableAPI, isHeaderCustomLayout?: boolean) {

diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -4281,9 +4281,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   //   startInertia(0, -1, 1, this.stateManager);
   // }
 
-  checkReactCustomLayout() {
+  checkReactCustomLayout(removeAllContainer: () => void) {
     if (!this.reactCustomLayout) {
-      this.reactCustomLayout = new ReactCustomLayout(this);
+      this.reactCustomLayout = new ReactCustomLayout(removeAllContainer, this);
     }
   }
 

diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts
@@ -320,6 +320,8 @@ export class Scenegraph {
       delete (this.tableGroup as any).border;
     }
     this.proxy?.release();
+
+    this.table.reactCustomLayout?.clearCache();
   }
 
   updateStageBackground() {

diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts
@@ -830,7 +830,7 @@ export interface BaseTableAPI {
   isAutoRowHeight: (row: number) => boolean;
 
   reactCustomLayout?: ReactCustomLayout;
-  checkReactCustomLayout: () => void;
+  checkReactCustomLayout: (removeAllContainer: () => void) => void;
   setSortedIndexMap: (field: FieldDef, filedMap: ISortedMapItem) => void;
 
   exportImg: () => string;