diff --git a/src/hooks/useFlowEditorState.ts b/src/hooks/useFlowEditorState.ts index 56f6e47..fb9708f 100644 --- a/src/hooks/useFlowEditorState.ts +++ b/src/hooks/useFlowEditorState.ts @@ -1,7 +1,7 @@ -import { useState, useRef, useEffect } from 'react'; +import { useState, useRef, useEffect, useMemo } from 'react'; import { Node, Edge } from '@xyflow/react'; import { debounce } from 'lodash'; -import { useSelector, useDispatch } from 'react-redux'; +import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import { updateCanvasDataMap } from '@/store/ideContainer'; import { Dispatch } from 'redux'; @@ -9,7 +9,15 @@ import { Dispatch } from 'redux'; export const useFlowEditorState = (initialData?: any) => { const [nodes, setNodes] = useState([]); const [edges, setEdges] = useState([]); - const { canvasDataMap, nodeStatusMap, isRunning, appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer); + + // 使用 shallowEqual 比较器来避免不必要的重新渲染 + const ideContainerState = useSelector((state: any) => ({ + canvasDataMap: state.ideContainer.canvasDataMap, + appRuntimeData: state.ideContainer.appRuntimeData, + currentAppData: state.ideContainer.currentAppData, + }), shallowEqual); + + const { canvasDataMap, appRuntimeData, currentAppData } = ideContainerState; const dispatch = useDispatch(); // 辅助函数:获取当前应用/子流程的唯一标识符 @@ -44,17 +52,23 @@ export const useFlowEditorState = (initialData?: any) => { // 更新节点状态,将从store获取的状态应用到节点上 useEffect(() => { - setNodes(prevNodes => - prevNodes.map(node => ({ + // 获取当前应用对应的节点状态映射 + const currentNodeStatusMap = currentAppKey && appRuntimeData[currentAppKey] + ? appRuntimeData[currentAppKey].nodeStatusMap + : {}; + + setNodes(prevNodes =>{ + return prevNodes.map(node => ({ ...node, data: { ...node.data, - status: nodeStatusMap[node.id] || 'waiting', + status: currentNodeStatusMap[node.id] || 'waiting', isStatusVisible: currentAppIsRunning // 只有在运行时才显示状态指示器 } })) - ); - }, [nodeStatusMap, currentAppIsRunning]); + + }); + }, [appRuntimeData, currentAppKey, currentAppIsRunning, initialData?.id,nodes.length]); const updateCanvasDataMapDebounced = useRef( debounce((dispatch: Dispatch, canvasDataMap: any, id: string, nodes: Node[], edges: Edge[]) => {