fix: fix g-react re-render (#1757)

* fix: render cache target to avoid rerender * refactor: fix typo of reconciler
antvis · Aug 22, 2024 · d52a8d8 · d52a8d8
1 parent 788245f
commit d52a8d8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/packages/react-g/src/canvas.tsx b/packages/react-g/src/canvas.tsx
@@ -2,7 +2,7 @@ import type { CanvasConfig } from '@antv/g';
 import { Canvas as GCanvas } from '@antv/g';
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import type { FiberRoot } from 'react-reconciler';
-import { reconcilor } from './reconciler';
+import { reconciler } from './reconciler';
 import { assertRef } from './util';
 
 export interface CanvasProps extends CanvasConfig {
@@ -52,7 +52,7 @@ export const Canvas = forwardRef<GCanvas, CanvasProps>(
       canvasRef.current = canvas;
 
       // @ts-ignore
-      container.current = reconcilor.createContainer(
+      container.current = reconciler.createContainer(
         canvas as any,
         1,
         false,
@@ -61,14 +61,14 @@ export const Canvas = forwardRef<GCanvas, CanvasProps>(
 
       return () => {
         // @ts-ignore
-        reconcilor.updateContainer(null, container.current, null);
+        reconciler.updateContainer(null, container.current, null);
       };
     }, []);
 
     useLayoutEffect(() => {
       if (container.current) {
         // @ts-ignore
-        reconcilor.updateContainer(children, container.current, null);
+        reconciler.updateContainer(children, container.current, null);
       }
     }, [children]);
 

diff --git a/packages/react-g/src/reconciler.ts b/packages/react-g/src/reconciler.ts
@@ -1,6 +1,6 @@
 import type { Canvas, Element } from '@antv/g';
 import React from 'react';
-import type { OpaqueHandle } from 'react-reconciler';
+import type { OpaqueHandle, OpaqueRoot } from 'react-reconciler';
 import ReactReconciler from 'react-reconciler';
 import { unstable_now as now } from 'scheduler';
 import { bindShapeEvent, updateProps } from './processProps';
@@ -20,7 +20,7 @@ import type {
   UpdatePayload,
 } from './types';
 
-export const reconcilor = ReactReconciler<
+export const reconciler = ReactReconciler<
   Type,
   Props,
   Container,
@@ -346,7 +346,7 @@ export const reconcilor = ReactReconciler<
   ): void {},
 });
 
-reconcilor.injectIntoDevTools({
+reconciler.injectIntoDevTools({
   // findFiberByHostInstance: () => {},
   // @ts-ignore
   bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
@@ -359,6 +359,8 @@ reconcilor.injectIntoDevTools({
   },
 });
 
+const TargetContainerWeakMap = new WeakMap<Element | Canvas, OpaqueRoot>();
+
 /**
  * render react-g component to target g element
  * 将react-g组件渲染到任意的g实例（Canvas/Group/Shape）中
@@ -372,7 +374,9 @@ export const render = (
   target: Element | Canvas,
   callback?: (() => void) | null,
 ) => {
-  // @ts-ignore
-  const container = reconcilor.createContainer(target as any, 1, false, null);
-  reconcilor.updateContainer(component, container, null, callback);
+  const container =
+    TargetContainerWeakMap.get(target) ||
+    reconciler.createContainer(target as any, 1, false, null);
+  TargetContainerWeakMap.set(target, container);
+  reconciler.updateContainer(component, container, null, callback);
 };
diff --git a/site/docs/guide/advanced-topics/use-react-g.zh.md b/site/docs/guide/advanced-topics/use-react-g.zh.md
@@ -3,7 +3,7 @@ title: 使用 React 定义图形
 order: 5
 ---
 
-react 通过 `react-reconcilor` 提供了自定义 render 的能力，`react-g` 便是一个 react 到 g 的 render。
+react 通过 `react-reconciler` 提供了自定义 render 的能力，`react-g` 便是一个 react 到 g 的 render。
 
 `react-g` 目前处于实验状态，欢迎试用和反馈。