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

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

@@ -36,17 +36,28 @@ const SortableItem = SortableElement((props) => <tr {...props} />);
 const SortableBody = SortableContainer((props) => <tbody {...props} />);
 
 class SortableTable extends React.Component {
-  state = {
-    dataSource: [],
-    columns: [],
-    sortDataSource: [],
-    setVisible: false,
-    searchDataSource: false,
-    onSearchSort: false,
-    isDefaultValue: false,
-    defaultValue: [],
-    bsTableCode: '', //设置table 列的标识
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [],
+      columns: [],
+      sortDataSource: [],
+      visible: false, // 修正: setVisible -> visible
+      searchDataSource: '',
+      onSearchSort: '',
+      isDefaultValue: false,
+      defaultValue: [],
+      bsTableCode: '', //设置table 列的标识
+    };
+
+    // 实例变量
+    this.isUnmounted = false;
+    this.requestController = null;
+    this.debounceTimer = null;
+    
+    // Modal组件ref，用于直接访问DOM进行清理
+    this.modalRef = React.createRef();
+  }
 
   patchUserColumnConfig = (config: any, tableCode: any) => {
     const { appRequestConfig } = this.props;
@@ -77,6 +88,9 @@ class SortableTable extends React.Component {
           message.error('保存表头列自定义失败，请稍后尝试');
           reject('');
         }
+      }).catch(error => {
+        console.error('[SortableTable] 请求失败:', error);
+        reject(error);
       });
     });
   };
@@ -162,7 +176,6 @@ class SortableTable extends React.Component {
 
   componentWillReceiveProps(nextProps: any) {
     if (this.isColumnsChange(this.props?.datasource, nextProps?.datasource)) {
-      //this.setInitValue(nextProps?.datasource || []);
       this.validateLocalStorageConfig(nextProps?.datasource, nextProps?.bsTableCode);
     }
   }
@@ -270,8 +283,145 @@ class SortableTable extends React.Component {
         })),
       bsTableCode,
     });
+
+  }
+
+  componentWillUnmount() {
+    console.log('[SortableTable] 组件即将卸载，开始清理资源');
+    
+    // 设置卸载标志，防止异步操作
+    this.isUnmounted = true;
+    
+    try {
+      // 1. 取消请求
+      if (this.requestController) {
+        try {
+          console.log('[SortableTable] 取消进行中的请求');
+          this.requestController.abort();
+          this.requestController = null;
+        } catch (abortError) {
+          console.warn('[SortableTable] 取消请求时出错:', abortError);
+        }
+      }
+      
+      // 2. 清理定时器
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = null;
+      }
+      
+      // 3. 清理Modal相关引用
+      if (this.state.visible) {
+        this.setState({ visible: false });
+      }
+
+      // 4. 清理事件处理器引用 - 重点修复外部触发按钮的内存泄漏
+      // 将所有事件处理器方法设为null，断开React事件委托的引用
+      this.showModal = null;
+      this.handleShowModal = null;
+      this.handleOk = null;
+      this.handleCancel = null;
+      this.handleReset = null;
+      this.handleResetSetting = null;
+      this.onChange = null;
+      this.onSearch = null;
+      this.onSearchSort = null;
+      this.handleTableHeadHidden = null;
+      this.patchUserColumnConfig = null;
+      this.setInitValue = null;
+
+      // 5. 强制清理react-sortable-hoc组件的Fiber引用
+      if (this.DraggableContainer) {
+        // 清理SortableContainer的内部引用
+        try {
+          if (this.DraggableContainer._reactInternalFiber) {
+            this.DraggableContainer._reactInternalFiber = null;
+          }
+          if (this.DraggableContainer._reactInternalInstance) {
+            this.DraggableContainer._reactInternalInstance = null;
+          }
+        } catch (e) {
+          // 忽略清理失败
+        }
+        this.DraggableContainer = null;
+      }
+      
+      if (this.DraggableBodyRow) {
+        // 清理SortableElement的内部引用
+        try {
+          if (this.DraggableBodyRow._reactInternalFiber) {
+            this.DraggableBodyRow._reactInternalFiber = null;
+          }
+          if (this.DraggableBodyRow._reactInternalInstance) {
+            this.DraggableBodyRow._reactInternalInstance = null;
+          }
+        } catch (e) {
+          // 忽略清理失败
+        }
+        this.DraggableBodyRow = null;
+      }
+      
+      // 清理columns引用
+      if (this.columns) {
+        this.columns.forEach(col => {
+          if (col && typeof col === 'object') {
+            Object.keys(col).forEach(key => {
+              if (typeof col[key] === 'function') {
+                col[key] = null;
+              }
+            });
+          }
+        });
+        this.columns = null;
+      }
+      
+      // 6. 清理Modal ref和DOM引用
+      if (this.modalRef && this.modalRef.current) {
+        try {
+          const modalElement = this.modalRef.current;
+          // 清理Modal DOM节点的React引用
+          const reactKeys = Object.keys(modalElement).filter(key => 
+            key.startsWith('__reactInternalInstance') || 
+            key.startsWith('__reactEventHandlers') ||
+            key.startsWith('_reactInternalFiber')
+          );
+          reactKeys.forEach(key => {
+            try {
+              delete modalElement[key];
+            } catch (e) {
+              // 忽略删除失败
+            }
+          });
+          
+          // 清理Fiber节点引用
+          if (modalElement._reactInternalFiber) {
+            modalElement._reactInternalFiber = null;
+          }
+          if (modalElement._reactInternalInstance) {
+            modalElement._reactInternalInstance = null;
+          }
+        } catch (error) {
+          console.warn('[SortableTable] Modal ref清理失败:', error);
+        }
+        this.modalRef.current = null;
+      }
+      this.modalRef = null;
+      
+      // 7. 清理状态引用
+      this.state = null;
+      
+      // 8. 防止组件卸载后的setState调用
+      this.setState = () => {
+        console.warn('[SortableTable] 组件已卸载，忽略setState调用');
+      };
+      
+      console.log('[SortableTable] 组件清理完成，__reactEventHandlers引用已断开');
+    } catch (error) {
+      console.warn('[SortableTable] 组件清理失败:', error);
+    }
   }
 
+
   columns = [
     {
       title: '列名称',
@@ -499,6 +649,7 @@ class SortableTable extends React.Component {
   ];
 
   showModal = () => {
+    if (this.isUnmounted) return;
     this.setState({
       visible: true,
       onSearchSort: false
@@ -506,7 +657,15 @@ class SortableTable extends React.Component {
     this.setInitValue();
   };
 
+  handleShowModal = () => {
+    if (this.isUnmounted) return;
+    if (this.showModal) {
+      this.showModal();
+    }
+  };
+
   handleOk = (e?: React.MouseEvent<HTMLElement>) => {
+    if (this.isUnmounted) return;
     const { sortDataSource, isDefaultValue, defaultValue } = this.state;
     if (!sortDataSource.length) {
       message.warning('至少选择一列!');
@@ -520,8 +679,11 @@ class SortableTable extends React.Component {
   };
 
   handleCancel = (e: React.MouseEvent<HTMLElement>) => {
+    if (this.isUnmounted) return;
     this.setState({
       visible: false,
+      searchDataSource: '',
+      onSearchSort: '',
     });
   };
 
@@ -592,6 +754,7 @@ class SortableTable extends React.Component {
 
 
   onChange = (e: CheckboxChangeEvent, title) => {
+    if (this.isUnmounted) return;
     const { sortDataSource, dataSource } = this.state;
 
     if (!e.target.checked) {
@@ -700,21 +863,28 @@ class SortableTable extends React.Component {
           this.setState({
             visible: false,
           });
+          resolve({ status: '0' });
         } else {
           message.error('重置表头列自定义失败，请稍后尝试');
           reject('');
         }
+      }).catch(error => {
+        console.error('[SortableTable] 重置请求失败:', error);
+        message.error('重置表头列自定义失败，请稍后尝试');
+        reject(error);
       });
     })
   };
 
   onSearch = (e: any) => {
+    if (this.isUnmounted) return;
     this.setState({
       searchDataSource: e.target.value,
     });
   };
 
   onSearchSort = (e: any) => {
+    if (this.isUnmounted) return;
     this.setState({
       onSearchSort: e.target.value,
     });
@@ -737,15 +907,60 @@ class SortableTable extends React.Component {
     );
 
     return (
-      <div className={'sort_table_wrapper'}>
+      <div data="bssulaquerysettingdiv" className={'sort_table_wrapper'}>
         {visible && (
           <Modal
+            ref={this.modalRef}
             title="展示列设置"
             wrapClassName={'sort_table_wrapper'}
             width={810}
             visible={visible}
             onOk={this.handleOk}
             onCancel={this.handleCancel}
+            destroyOnClose={true}
+            afterClose={() => {
+              if (this.isUnmounted) return;
+              
+              // 清理Modal相关的状态和引用
+              this.setState({
+                searchDataSource: '',
+                onSearchSort: '',
+              });
+              
+              // 强制清理React Fiber节点和DOM引用
+              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) {
+                        // 忽略删除失败
+                      }
+                    });
+                    
+                    // 清理React Fiber引用
+                    if (element._reactInternalFiber) {
+                      element._reactInternalFiber = null;
+                    }
+                    if (element._reactInternalInstance) {
+                      element._reactInternalInstance = null;
+                    }
+                  });
+                  
+                  // 强制垃圾回收提示
+                  if (window.gc) {
+                    window.gc();
+                  }
+                } catch (error) {
+                  console.warn('[SortableTable] Modal afterClose清理失败:', error);
+                }
+              }, 100);
+            }}
             footer={[
               <div>
                 <Button
@@ -955,13 +1170,13 @@ class SortableTable extends React.Component {
           </Modal>
         )}
         {
-          !onlyModal
-            ? <div onClick={this.showModal} style={{fontSize:14}}>列设置</div>
-            : ''
+          !onlyModal && !this.isUnmounted
+            ? <div onClick={this.handleShowModal} style={{fontSize:14}}>列设置</div>
+            : null
         }
       </div>
     );
   }
 }
 
-export default SortableTable;
+export default SortableTable;

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

@@ -92,14 +92,16 @@ const DetailWrapper = React.memo(
 
     const basePath = window.top == window ? '' : `/${itemPath}`;
 
-    const menuRoutes =
-      window.top == window
+    const menuRoutes = useMemo(() => {
+      return window.top == window
         ? routes.find((item) => item.path === '/')?.routes || []
         : JSON.parse(localStorage.getItem(getLimitMenuDataKey()) || '[]');
+    }, [routes, itemPath]);
 
-    const breadcrumbNameMap = getMainCrumbNameMap(
-      memoizeOneFormatter(menuRoutes, ''),
-    );
+    const breadcrumbNameMap = useMemo(() => {
+      return getMainCrumbNameMap(memoizeOneFormatter(menuRoutes, ''));
+    }, [menuRoutes]); // 只有menuRoutes变化时才重新创建
+    
     const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
       const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
         pathToRegexp ? pathToRegexp(key).test(pathname) : false,
@@ -107,7 +109,7 @@ const DetailWrapper = React.memo(
       return pathKey ? breadcrumbNameMap[pathKey] : undefined;
     };
 
-    const getPageTitle = (pathname: string) => {
+    const { pageTitle, breadcrumbArrs } = useMemo(() => {
       const  { hideRouteArray = [] } = localStorage.getItem(getCommonInfoKey()) && JSON.parse(localStorage.getItem(getCommonInfoKey())) || {};
       const currRouterData = matchParamsPath(
         `${basePath}${pathname}`,
@@ -115,7 +117,7 @@ const DetailWrapper = React.memo(
       ) || getDetailMatchRoute(`${basePath}${pathname}`,breadcrumbNameMap,hideRouteArray, { pathToRegexp });
 
       if (!currRouterData) {
-        return '';
+        return { pageTitle: '', breadcrumbArrs: [] };
       }
 
       let breadcrumbArrs = currRouterData.nameMap || [];
@@ -134,9 +136,7 @@ const DetailWrapper = React.memo(
           breadcrumbNameMap,
         );
 
-        if(!parentRoute) return;
-
-        if(breadcrumbArrs.length >= 2) {
+        if(parentRoute && breadcrumbArrs.length >= 2) {
           breadcrumbArrs.splice(-1, 0, {
             title: parentRoute.name,
             path: result[1]
@@ -144,21 +144,24 @@ const DetailWrapper = React.memo(
         }
       }
 
-      setBreadCrumbArr([...breadcrumbArrs]);
-
       const pageName = formatMessage({
         id: currRouterData.locale || currRouterData.name,
         defaultMessage: currRouterData.name,
       });
 
-      return title
+      const pageTitle = title
         ? title
         : window.top === window
         ? pageName
         : `${currRouterData.name}`;
-    };
 
-    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
+      return { pageTitle, breadcrumbArrs: [...breadcrumbArrs] };
+    }, [pathname, title, breadcrumbNameMap, basePath, pathToRegexp]);
+
+    // 使用useEffect来更新breadcrumbArr状态，避免在渲染过程中直接调用setState
+    useEffect(() => {
+      setBreadCrumbArr(breadcrumbArrs);
+    }, [breadcrumbArrs]);
 
     useEffect(() => {}, []);
 
@@ -195,11 +198,11 @@ const DetailWrapper = React.memo(
       }
     };
 
-    const renderPageActionList = (actionLists: Array<actionItem>) => {
+    const renderedActionList = useMemo(() => {
       const authButton = localStorage.getItem(getMenuAuthDataKey())
       ? JSON.parse(localStorage.getItem(getMenuAuthDataKey()) as string)
       : [];
-      let visibleActions = actionLists.filter(
+      let visibleActions = actionList.filter(
         (action) =>
           ((action.visible && action.visible !== 'false') || judgeIsEmpty(action.visible)) &&
           (!shouldUseAuth() || (judgeIsEmpty(action.code) || authButton.filter(item => item === action.code))),
@@ -228,7 +231,7 @@ const DetailWrapper = React.memo(
       };
 
       // 可在actionList第一项设置visibleActionCount，控制按钮几个开始显示更多，默认为3个
-      if (visibleActions.length <= (actionLists?.[0]?.visibleActionCount || 3)) {
+      if (visibleActions.length <= (actionList?.[0]?.visibleActionCount || 3)) {
         return visibleActions.map((item) => {
           return renderButton(item);
         });
@@ -258,7 +261,7 @@ const DetailWrapper = React.memo(
           </Dropdown>
         </div>
       );
-    };
+    }, [actionList]);
 
     return (
       <div ref={wrapperContainerRef} className='bs_detail_page_head_wrapper'>
@@ -280,11 +283,11 @@ const DetailWrapper = React.memo(
           <div className={'detail_page_title_box'}>
             {/* <div className={'detail_page_title'}>{pageTitle}</div> */}
             <Breadcrumb>
-              {breadcrumbArr.map((item, index) => {
+              {breadcrumbArrs.map((item, index) => {
                 return <Breadcrumb.Item
                     key={item}
                   >
-                    <span className={`${index === breadcrumbArr.length - 1 ? 'bread_name_last' : ''} bread_name`} >
+                    <span className={`${index === breadcrumbArrs.length - 1 ? 'bread_name_last' : ''} bread_name`} >
                       {typeof item == 'object' ? <span className='bread_name_pre' onClick={()=> {
                         history.push({
                           pathname: item.path
@@ -299,7 +302,7 @@ const DetailWrapper = React.memo(
             className={'detail_page_btns'}
             style={{ marginRight: '20px', display: 'flex', gap: '8px' }}
           >
-            {renderPageActionList(actionList)}
+            {renderedActionList}
             {
               !donotNeedShowScreenIcon ? ( <a>
                 {isFullScreen ? (
@@ -340,11 +343,11 @@ const DetailWrapper = React.memo(
     );
   },
   (prevProps, nextProps) => {
-    if (
-      (JSON.stringify(prevProps.actionList) != JSON.stringify(nextProps.actionList)) || prevProps.title !== nextProps.title
-    ) {
-      return false;
-    }
+    // if (
+    //   (JSON.stringify(prevProps.actionList) != JSON.stringify(nextProps.actionList)) || prevProps.pathname !== nextProps.pathname
+    // ) {
+    //   return false;
+    // }
     return true;
   },
 );

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

@@ -38,14 +38,16 @@ const HeaderWrapper = React.memo(
   }: { pathname: string, routes: any[], itemPath: string, alertProps: any }) => {
     const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
     const basePath = window.top == window ? '' : `/${itemPath}`;
-    const menuRoutes =
-      window.top == window
+    
+    const menuRoutes = useMemo(() => {
+      return window.top == window
         ? routes.find((item) => item.path === '/')?.routes || []
         : JSON.parse(localStorage.getItem(getLimitMenuDataKey()) || '[]');
+    }, [routes, itemPath]);
 
-    const breadcrumbNameMap = getMainCrumbNameMap(
-      memoizeOneFormatter(menuRoutes, ''),
-    );
+    const breadcrumbNameMap = useMemo(() => {
+      return getMainCrumbNameMap(memoizeOneFormatter(menuRoutes, ''));
+    }, [menuRoutes]); // 只有menuRoutes变化时才重新创建
 
     const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
       const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
@@ -122,9 +124,9 @@ const HeaderWrapper = React.memo(
     );
   },
   (prevProps, nextProps) => {
-    if (prevProps.title !== nextProps.title) {
-      return false;
-    }
+    // if (prevProps.pathname !== nextProps.pathname) {
+    //   return false;
+    // }
     return true;
   },
 );