@bit-sun/business-component 4.2.5-per-alpha.2 → 4.2.5-per-alpha.3

package/src/components/Business/BsSulaQueryTable/setting.tsx

@@ -48,12 +48,12 @@ class SortableTable extends React.Component {
       isDefaultValue: false,
       defaultValue: [],
       bsTableCode: '', //设置table 列的标识
-    };
-
+    }
     // 实例变量
     this.isUnmounted = false;
     this.requestController = null;
     this.debounceTimer = null;
+    this.cleanupTimer = null;
     
     // Modal组件ref，用于直接访问DOM进行清理
     this.modalRef = React.createRef();
@@ -927,37 +927,47 @@ class SortableTable extends React.Component {
                 onSearchSort: '',
               });
               
+              // 清理之前的定时器
+              if (this.cleanupTimer) {
+                clearTimeout(this.cleanupTimer);
+                this.cleanupTimer = null;
+              }
+              
               // 强制清理React Fiber节点和DOM引用
-              setTimeout(() => {
+              this.cleanupTimer = setTimeout(() => {
                 try {
-                  // 清理所有带有sort_table类名的DOM节点的React引用
-                  const sortTableElements = document.querySelectorAll('.sort_table, .sort_table_column_wrapper, .sort_table_column, .sort_table_content_wrapper, .sort_table_column_count');
-                  sortTableElements.forEach(element => {
-                    // 清理React内部实例引用
-                    const reactKeys = Object.keys(element).filter(key => key.startsWith('__reactInternalInstance') || key.startsWith('__reactEventHandlers'));
-                    reactKeys.forEach(key => {
-                      try {
-                        delete element[key];
-                      } catch (e) {
-                        // 忽略删除失败
+                  if (!this.isUnmounted) {
+                    // 清理所有带有sort_table类名的DOM节点的React引用
+                    const sortTableElements = document.querySelectorAll('.sort_table, .sort_table_column_wrapper, .sort_table_column, .sort_table_content_wrapper, .sort_table_column_count');
+                    sortTableElements.forEach(element => {
+                      // 清理React内部实例引用
+                      const reactKeys = Object.keys(element).filter(key => key.startsWith('__reactInternalInstance') || key.startsWith('__reactEventHandlers'));
+                      reactKeys.forEach(key => {
+                        try {
+                          delete element[key];
+                        } catch (e) {
+                          // 忽略删除失败
+                        }
+                      });
+                      
+                      // 清理React Fiber引用
+                      if (element._reactInternalFiber) {
+                        element._reactInternalFiber = null;
+                      }
+                      if (element._reactInternalInstance) {
+                        element._reactInternalInstance = null;
                       }
                     });
                     
-                    // 清理React Fiber引用
-                    if (element._reactInternalFiber) {
-                      element._reactInternalFiber = null;
-                    }
-                    if (element._reactInternalInstance) {
-                      element._reactInternalInstance = null;
+                    // 强制垃圾回收提示
+                    if (window.gc) {
+                      window.gc();
                     }
-                  });
-                  
-                  // 强制垃圾回收提示
-                  if (window.gc) {
-                    window.gc();
                   }
                 } catch (error) {
                   console.warn('[SortableTable] Modal afterClose清理失败:', error);
+                } finally {
+                  this.cleanupTimer = null;
                 }
               }, 100);
             }}

package/src/components/Business/HomePageWrapper/index.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { memoizeOneFormatter } from '@/utils/utils';
 import { Breadcrumb, Space } from 'antd';
 import { useLocation, formatMessage } from 'umi';
@@ -10,11 +10,10 @@ import './index.less';
 
 export default (props: any) => {
   const { pathname } = useLocation();
-  const [id]: any = useState(pathname + 'id');
   const { children, ...restProps} = props;
 
   return (
-    <div id={id} className={'home_page_wrapper'}>
+    <div id="home-page-wrapper" className={'home_page_wrapper'}>
       <HeaderWrapper
         pathname={pathname}
         {
@@ -37,6 +36,7 @@ const HeaderWrapper = React.memo(
     pathToRegexp, //改为从项目代码透传该方法
   }: { pathname: string, routes: any[], itemPath: string, alertProps: any }) => {
     const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
+    const isMountedRef = React.useRef(true);
     const basePath = window.top == window ? '' : `/${itemPath}`;
     
     const menuRoutes = useMemo(() => {
@@ -49,15 +49,15 @@ const HeaderWrapper = React.memo(
       return getMainCrumbNameMap(memoizeOneFormatter(menuRoutes, ''));
     }, [menuRoutes]); // 只有menuRoutes变化时才重新创建
 
-    const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
+    const matchParamsPath = useCallback((pathname: string, breadcrumbNameMap: object) => {
       const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
         pathToRegexp ? pathToRegexp(key).test(pathname) : false
       );
 
       return pathKey ? breadcrumbNameMap[pathKey] : undefined;
-    };
+    }, [pathToRegexp]);
 
-    const getPageTitle = (pathname: string) => {
+    const getPageTitle = useCallback((pathname: string) => {
       const currRouterData = matchParamsPath(
         `${basePath}${pathname}`,
         breadcrumbNameMap,
@@ -72,18 +72,39 @@ const HeaderWrapper = React.memo(
         breadcrumbArrs.pop();
         breadcrumbArrs.push(title)
       }
-      setBreadCrumbArr([...breadcrumbArrs])
+      // 只在组件挂载时更新状态，避免内存泄漏
+      if (isMountedRef.current) {
+        setBreadCrumbArr([...breadcrumbArrs]);
+      }
 
       const pageName = formatMessage({
         id: currRouterData.locale || currRouterData.name,
         defaultMessage: currRouterData.name,
       });
       return title ? title : window.top === window ? pageName : `${currRouterData.name}`;
-    };
+    }, [matchParamsPath, breadcrumbNameMap, basePath, title]);
+
+    const pageTitle = useMemo(() => getPageTitle(pathname), [getPageTitle, pathname]);
 
-    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
+    useEffect(() => {
+      // 路径变化时的清理逻辑
+      return () => {
+        // 只在组件仍挂载时清理状态
+        if (isMountedRef.current) {
+          setBreadCrumbArr([]);
+        }
+      };
+    }, [pathname]);
 
-    useEffect(() => {}, [pathname]);
+    // 组件卸载时清理所有引用
+    useEffect(() => {
+      return () => {
+        // 标记组件已卸载
+        isMountedRef.current = false;
+        // 清理所有状态和引用
+        setBreadCrumbArr([]);
+      };
+    }, []);
 
     return (
       <div className='bs_home_page_head_wrapper'>
@@ -124,9 +145,18 @@ const HeaderWrapper = React.memo(
     );
   },
   (prevProps, nextProps) => {
-    // if (prevProps.pathname !== nextProps.pathname) {
-    //   return false;
-    // }
+    // 如果关键属性发生变化，则需要重新渲染
+    if (
+      prevProps.pathname !== nextProps.pathname ||
+      prevProps.title !== nextProps.title ||
+      prevProps.itemPath !== nextProps.itemPath ||
+      prevProps.routes !== nextProps.routes ||
+      prevProps.pathToRegexp !== nextProps.pathToRegexp ||
+      JSON.stringify(prevProps.alertProps) !== JSON.stringify(nextProps.alertProps) ||
+      prevProps.extra !== nextProps.extra
+    ) {
+      return false;
+    }
     return true;
   },
 );

package/src/components/Business/JsonQueryTable/configTree/index.js

@@ -33,6 +33,8 @@ export default props => {
   } = props;
   const [treeData, setTreeData] = useState(parseData(data));
   const [activeLine, setActiveLine] = useState(-1);
+  const highlightTimerRef = React.useRef(null);
+  const isUnmountedRef = React.useRef(false);
 
   useEffect(() => {
     setTreeData(parseData(data));
@@ -47,10 +49,35 @@ export default props => {
   }, [treeData, currentLine]);
 
   useEffect(() => {
-    setTimeout(() => {
-      setTreeData(createHighLightTreeData(treeData, activeLine));
+    // 清理之前的定时器
+    if (highlightTimerRef.current) {
+      clearTimeout(highlightTimerRef.current);
+      highlightTimerRef.current = null;
+    }
+    
+    highlightTimerRef.current = setTimeout(() => {
+      try {
+        if (!isUnmountedRef.current) {
+          setTreeData(createHighLightTreeData(treeData, activeLine));
+        }
+      } catch (error) {
+        console.warn('Failed to update tree highlight:', error);
+      } finally {
+        highlightTimerRef.current = null;
+      }
     });
   }, [activeLine]);
+  
+  // 组件卸载时清理定时器
+  useEffect(() => {
+    return () => {
+      isUnmountedRef.current = true;
+      if (highlightTimerRef.current) {
+        clearTimeout(highlightTimerRef.current);
+        highlightTimerRef.current = null;
+      }
+    };
+  }, []);
 
   const handleSelect = (node, hasChildren) => {
     const noActiveData = clearActiveNode(treeData);

package/src/components/Functional/QueryMutipleSelect/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+// @ts-nocheck
+import React, { useState, useEffect, useRef } from 'react';
 import { useDebounceFn } from 'ahooks';
 import _, { isNil } from "lodash"
 import { Select, Input, Button, Modal, ConfigProvider, Spin, message } from 'antd';
@@ -45,6 +46,8 @@ const QueryMutipleSearchSelect = ({ onValueChange, requestConfig={}, selectProps
   const [fetching, setFetching] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const [uniqueValue, setUniqueValue] = useState(resultSourceKey);
+  const selectTimerRef = useRef(null);
+  const isUnmountedRef = useRef(false);
 
   useEffect(() => {
     setPopValue(value);
@@ -54,6 +57,17 @@ const QueryMutipleSearchSelect = ({ onValueChange, requestConfig={}, selectProps
   useEffect(() => {
     setUniqueValue(makeUniqueValue());
   }, [resultSourceKey])
+  
+  // 组件卸载时清理定时器
+  useEffect(() => {
+    return () => {
+      isUnmountedRef.current = true;
+      if (selectTimerRef.current) {
+        clearTimeout(selectTimerRef.current);
+        selectTimerRef.current = null;
+      }
+    };
+  }, []);
 
   const showModal = () => {
     setIsModalVisible(true);
@@ -155,9 +169,24 @@ const QueryMutipleSearchSelect = ({ onValueChange, requestConfig={}, selectProps
           onSearch={(v) => onSearchChange(v)}
           onSelect={() => {
             if(selectMode) return;
-            setTimeout(() => {
-              setOpen(false)
-            }, 0)
+            
+            // 清理之前的定时器
+            if (selectTimerRef.current) {
+              clearTimeout(selectTimerRef.current);
+              selectTimerRef.current = null;
+            }
+            
+            selectTimerRef.current = setTimeout(() => {
+              try {
+                if (!isUnmountedRef.current) {
+                  setOpen(false);
+                }
+              } catch (error) {
+                console.warn('Failed to close select:', error);
+              } finally {
+                selectTimerRef.current = null;
+              }
+            }, 0);
           }}
           style={{ width: 'calc(100%)' }}
           suffixIcon={<div className={`query_select_expand_button`} onClick={showModal}><DashOutlined /></div>}