diff --git a/packages/react-g/src/canvas.tsx b/packages/react-g/src/canvas.tsx index d61e8a09d..95d2f0a11 100644 --- 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( 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( 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 index 222837c37..4ac24da18 100644 --- 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(); + /** * 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 index f0abdb541..34e97346c 100644 --- 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` 目前处于实验状态,欢迎试用和反馈。