diff --git a/src/components/InstanceCanvas/index.tsx b/src/components/InstanceCanvas/index.tsx index 4b77207..9f179ac 100644 --- a/src/components/InstanceCanvas/index.tsx +++ b/src/components/InstanceCanvas/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef, useEffect, useMemo, useCallback, memo } from 'react'; import { ResizeBox, Tabs, Message, Spin, Table, TableColumnProps, Button } from '@arco-design/web-react'; import { IconCheckCircleFill, IconLoading, IconCloseCircleFill, IconLeft } from '@arco-design/web-react/icon'; import FlowEditor from '@/pages/flowEditor/index'; @@ -9,6 +9,21 @@ import styles from './index.module.less'; const TabPane = Tabs.TabPane; +// 使用 memo 包装 FlowEditor,防止不必要的重新渲染 +const MemoizedFlowEditor = memo(({ flowData, instanceId }: { flowData: any; instanceId: string }) => { + return ( + + ); +}, (prevProps, nextProps) => { + // 自定义比较函数:只有当 instanceId 变化时才重新渲染 + return prevProps.instanceId === nextProps.instanceId; +}); + interface LogMessage { id: number; type: string; @@ -35,9 +50,10 @@ const InstanceCanvas: React.FC = ({ instanceData, title, on const [flowData, setFlowData] = useState(null); // 流程数据 const [loading, setLoading] = useState(false); // 加载状态 const resizeBoxRef = useRef(null); + const flowDataRef = useRef(null); // 使用 ref 来存储 flowData,避免重复设置 // 获取实例定义数据 - const fetchInstanceDefinition = async () => { + const fetchInstanceDefinition = useCallback(async () => { if (!instanceData?.id) return; setLoading(true); @@ -88,12 +104,18 @@ const InstanceCanvas: React.FC = ({ instanceData, title, on return acc; }, {} as any); - setFlowData({ + const newFlowData = { components: convertedComponents, main: { components: convertedComponents } - }); + }; + + // 只在数据真正变化时才更新 + if (!flowDataRef.current) { + flowDataRef.current = newFlowData; + setFlowData(newFlowData); + } } // 处理运行日志 @@ -139,12 +161,13 @@ const InstanceCanvas: React.FC = ({ instanceData, title, on } finally { setLoading(false); } - }; + }, [instanceData?.id]); // 当 instanceData 变化时,重新获取数据 useEffect(() => { + flowDataRef.current = null; // 重置 ref fetchInstanceDefinition(); - }, [instanceData?.id]); + }, [instanceData?.id, fetchInstanceDefinition]); // 处理 Tab 点击事件 const handleTabClick = (key: string) => { @@ -165,7 +188,7 @@ const InstanceCanvas: React.FC = ({ instanceData, title, on }, [logBarExpanded, logContainerHeight]); // 处理 ResizeBox 手动调整大小事件 - const handleResize = (e: MouseEvent, size: { width: number; height: number }) => { + const handleResize = useCallback((e: MouseEvent, size: { width: number; height: number }) => { if (size.height <= 40) { setLogBarExpanded(false); } @@ -173,7 +196,7 @@ const InstanceCanvas: React.FC = ({ instanceData, title, on setLogBarExpanded(true); setLogContainerHeight(`${size.height}px`); } - }; + }, []); // 渲染运行日志内容 const renderRuntimeLogs = () => { @@ -317,7 +340,10 @@ const InstanceCanvas: React.FC = ({ instanceData, title, on 加载中... ) : flowData ? ( - + ) : (
暂无流程数据