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 ? (
-
+
) : (
暂无流程数据