chore: 优化 useEffectWhen

.gitignore

@@ -62,3 +62,4 @@ mvnw
 *storybook.log
 
 /react-ui/docs
+/react-ui/types/tsconfig.tsbuildinfo

react-ui/src/hooks/useEffectWhen.ts

@@ -8,20 +8,17 @@ import { useEffect, useRef } from 'react';
  * @param deps - The dependencies for the effect.
  */
 export const useEffectWhen = (effect: () => void, when: boolean, deps: React.DependencyList) => {
-  const requestFns = useRef<(() => void)[]>([]);
+  const requestFn = useRef<(() => void) | undefined>(effect);
   useEffect(() => {
-    if (when) {
-      effect();
-    } else {
-      requestFns.current.splice(0, 1, effect);
-    }
+    requestFn.current = effect;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, [...deps, effect]);
 
   useEffect(() => {
-    if (when) {
-      const fn = requestFns.current.pop();
-      fn?.();
+    if (when && requestFn.current) {
+      requestFn.current();
+      requestFn.current = undefined;
     }
-  }, [when]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, when]);
 };

react-ui/src/pages/Model/components/ModelEvolution/index.tsx

@@ -9,7 +9,7 @@ import { getModelAtlasReq } from '@/services/dataset/index.js';
 import themes from '@/styles/theme.less';
 import { to } from '@/utils/promise';
 import G6, { G6GraphEvent, Graph, INode } from '@antv/g6';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import NodeTooltips from '../NodeTooltips';
 import styles from './index.less';
@@ -73,17 +73,45 @@ function ModelEvolution({
     };
   }, []);
 
-  useEffectWhen(
-    () => {
-      if (version) {
-        getModelAtlas();
-      } else {
-        clearGraphData();
-      }
-    },
-    isActive,
-    [resourceId, version],
-  );
+  const getModelAtlas = useCallback(async () => {
+    // 请求失败或者版本不存在时，清除图形
+    function clearGraphData() {
+      graph.data({
+        nodes: [],
+        edges: [],
+      });
+      graph.render();
+      graph.fitView();
+    }
+
+    if (!resourceId || !identifier || !version) {
+      clearGraphData();
+      return;
+    }
+
+    const params = {
+      id: resourceId,
+      identifier,
+      version,
+    };
+    const [res] = await to(getModelAtlasReq(params));
+    if (res && res.data) {
+      const data = normalizeTreeData(res.data);
+      apiData.current = data;
+      hierarchyNodes.current = traverseHierarchically(data);
+      const graphData = getGraphData(data, hierarchyNodes.current);
+
+      graph.data(graphData);
+      graph.render();
+      graph.fitView();
+      setShowNodeTooltip(false);
+      setEnterTooltip(false);
+    } else {
+      clearGraphData();
+    }
+  }, [resourceId, identifier, version]);
+
+  useEffectWhen(getModelAtlas, isActive, [resourceId, identifier, version]);
 
   // 初始化图
   const initGraph = () => {
@@ -249,40 +277,6 @@ function ModelEvolution({
     }, 100);
   };
 
-  // 获取模型依赖
-  const getModelAtlas = async () => {
-    const params = {
-      id: resourceId,
-      identifier,
-      version,
-    };
-    const [res] = await to(getModelAtlasReq(params));
-    if (res && res.data) {
-      const data = normalizeTreeData(res.data);
-      apiData.current = data;
-      hierarchyNodes.current = traverseHierarchically(data);
-      const graphData = getGraphData(data, hierarchyNodes.current);
-
-      graph.data(graphData);
-      graph.render();
-      graph.fitView();
-      setShowNodeTooltip(false);
-      setEnterTooltip(false);
-    } else {
-      clearGraphData();
-    }
-  };
-
-  // 请求失败或者版本不存在时，清除图形
-  function clearGraphData() {
-    graph.data({
-      nodes: [],
-      edges: [],
-    });
-    graph.render();
-    graph.fitView();
-  }
-
   return (
     <div className={styles['model-evolution']}>
       <div className={styles['model-evolution__graph']} id="canvas" ref={graphRef}></div>