字段过多卡顿问题

src/view/Manage/Model/Component/ImportActionTable.jsx

 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Input, Form, Typography, Radio, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table } from 'antd';
+import { Input, Form, Typography, Radio, Button, Popconfirm, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination } from 'antd';
 import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 
-import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth } from '../../../../util';
+import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
 import { AppContext } from '../../../../App';
@@ -16,6 +16,7 @@ const { Option } = Select;
 
 const type = 'DragableTableBodyRow';
 const perSuggestCount = 5;
+const supportMaxAttributeCountPerPage = 100;
 
 const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 
@@ -245,13 +246,11 @@ const ImportActionTable = (props) => {
   const [ keyword, setKeyword ] = useState('');
   const [ autoTranslate, setAutoTranslate ] = useState(false);
 
-  const [ filterData, setFilterData ] = useState([]);
-  
-  const onChangeRef = useRef();
-  onChangeRef.current = onChange;
+  const [ filterPageCondition, setFilterPageCondition ] = useState({ pageNum: 1, pageSize: supportMaxAttributeCountPerPage, filterData: [] });
+  const [ filterPageData, setFilterPageData ] = useState([]);
+  const { pageNum, pageSize, filterData } = filterPageCondition;
 
-  const dataRef = useRef();
-  dataRef.current = data;
+  const moveRowRef = useRef({ data, onChange, pageNum, pageSize });
 
   //规则改变的时候 数据表为可编辑状态
   useEffect(() => {
@@ -259,12 +258,53 @@ const ImportActionTable = (props) => {
   }, [constraint, template, modelerData])
 
   useEffect(() => {
+
     setData(modelerData.easyDataModelerDataModelAttributes||[]);
-    dataRef.current = (modelerData.easyDataModelerDataModelAttributes||[]);
-    setFilterData((modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1));
 
-  }, [modelerData, keyword])
-  
+    moveRowRef.current.data = (modelerData.easyDataModelerDataModelAttributes||[]);
+
+    let _filterData = (modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+
+    setFilterPageCondition({...filterPageCondition, filterData: _filterData});
+
+    if (_filterData.length > supportMaxAttributeCountPerPage) {
+      const _filterPageData = paginate(_filterData, pageNum, pageSize);
+      setFilterPageData(_filterPageData);
+    } else {
+      setFilterPageData(_filterData);
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelerData])
+
+  useEffect(() => {
+    let _filterData = (modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+
+    setFilterPageCondition({...filterPageCondition, ...{filterData: _filterData, pageNum: 1} });
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keyword])
+
+  useEffect(() => {
+
+
+    moveRowRef.current.pageNum = pageNum;
+    moveRowRef.current.pageSize = pageSize;
+
+    if (filterData.length > supportMaxAttributeCountPerPage) {
+      let _filterPageData = paginate(filterData, pageNum, pageSize);
+
+      if ((_filterPageData||[]).length===0 && pageNum > 1) {
+        setFilterPageCondition({...filterPageCondition, pageNum: (pageNum-1)});
+        moveRowRef.current.pageNum = pageNum - 1;
+      } else {
+        setFilterPageData(_filterPageData);
+      }
+    } else {
+      setFilterPageData(filterData);
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterPageCondition])
+
   const isEditing = (record) => record?.iid === editingKey;
 
   const onAddClick = () => {
@@ -272,7 +312,15 @@ const ImportActionTable = (props) => {
     const iid = generateUUID();
     const newFilterData = [...filterData, {iid}];
     
-    setFilterData(newFilterData);
+    if (newFilterData.length > supportMaxAttributeCountPerPage) {
+      
+      const totalNum = (newFilterData.length/supportMaxAttributeCountPerPage) + ((newFilterData.length%supportMaxAttributeCountPerPage===0)?0:1);
+      
+      setFilterPageCondition({...filterPageCondition, ...{ filterData: newFilterData, pageNum: totalNum }});
+    } else {
+      setFilterPageCondition({...filterPageCondition, ...{ filterData: newFilterData}});
+    }
+
     edit(newFilterData[newFilterData.length-1]);
     setTimeout(() => {
       document.getElementById(`field-${iid}`)?.scrollIntoView();
@@ -322,7 +370,7 @@ const ImportActionTable = (props) => {
     const item = newFilterData[index];
     if (_index===-1 && (!item.name || item.name==='')) {
       newFilterData.splice(index, 1);
-      setFilterData(newFilterData);
+      setFilterPageCondition({...filterPageCondition, filterData: newFilterData  })
     }
 
     setEditingKey('');
@@ -905,18 +953,29 @@ const ImportActionTable = (props) => {
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
 
-      const dragRow = dataRef.current[dragIndex];
+      const { data, onChange, pageNum, pageSize } = moveRowRef.current;
+
+      let realDragIndex = dragIndex;
+      let realHoverIndex = hoverIndex;
+
+      if ((data||[]).length>supportMaxAttributeCountPerPage) {
+        realDragIndex = (pageNum-1)*pageSize + dragIndex;
+        realHoverIndex = (pageNum-1)*pageSize + hoverIndex;
+      }
 
-      const newData = update(dataRef.current, {
+      const dragRow = data[realDragIndex];
+
+      const newData = update(data, {
         $splice: [
-          [dragIndex, 1],
-          [hoverIndex, 0, dragRow],
+          [realDragIndex, 1],
+          [realHoverIndex, 0, dragRow],
         ],
       })
-      onChangeRef.current && onChangeRef.current(newData);
+
+      onChange && onChange(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
-    [dataRef.current],
+    [moveRowRef.current],
   );
 
   const onSearchInputChange = (e) => {
@@ -1007,7 +1066,7 @@ const ImportActionTable = (props) => {
                   moveRow
                 }
               }}
-              dataSource={filterData||[]}
+              dataSource={filterPageData||[]}
               columns={mergedColumns()}
               size='small'
               rowKey='iid'
@@ -1070,6 +1129,26 @@ const ImportActionTable = (props) => {
             />
           </Form>
         </DndProvider>
+        {
+          (filterData.length > supportMaxAttributeCountPerPage) && <Pagination
+            className="text-center mt-3"
+            showSizeChanger
+            showQuickJumper
+            onChange={(_pageNum, _pageSize) => {
+              setFilterPageCondition({...filterPageCondition, ...{ pageNum: _pageNum, pageSize: _pageSize || supportMaxAttributeCountPerPage }})
+            }}
+            onShowSizeChange={(_pageNum, _pageSize) => {
+              setFilterPageCondition({...filterPageCondition, ...{ pageNum: _pageNum || 1, pageSize: _pageSize }})
+            }}
+            current={pageNum}
+            pageSize={pageSize}
+            defaultCurrent={1}
+            total={(filterData||[]).length}
+            pageSizeOptions={[50, supportMaxAttributeCountPerPage]}
+            showTotal={total => `共 ${(filterData||[]).length} 条`}
+          />
+        } 
+        
       </div>
     </div>
   );