优化 crud 性能

src/renderers/Table/TableContent.tsx

@@ -98,7 +98,7 @@ export class TableContent extends React.Component<TableContentProps> {
           {...itemProps}
           classnames={cx}
           checkOnItemClick={checkOnItemClick}
-          key={item.id}
+          key={item.index}
           itemIndex={rowIndex}
           item={item}
           itemClassName={cx(
@@ -127,7 +127,7 @@ export class TableContent extends React.Component<TableContentProps> {
               {...itemProps}
               classnames={cx}
               checkOnItemClick={checkOnItemClick}
-              key={`foot-${item.id}`}
+              key={`foot-${item.index}`}
               itemIndex={rowIndex}
               item={item}
               itemClassName={cx(

src/renderers/Table/TableRow.tsx

@@ -36,7 +36,9 @@ export class TableRow extends React.Component<TableRowProps> {
     const parent = props.parent;
     this.reaction = reaction(
       () =>
-        `${item.isHover}${item.checked}${item.moved}${item.modified}${item.expanded}${parent?.expanded}`,
+        `${item.isHover}${item.checked}${JSON.stringify(item.data)}${
+          item.moved
+        }${item.modified}${item.expanded}${parent?.expanded}`,
       () => this.forceUpdate(),
       {
         onError: () => this.reaction!()

src/store/table.ts

@@ -173,6 +173,11 @@ export const Row = types
 
     setIsHover(value: boolean) {
       self.isHover = value;
+    },
+
+    replaceWith(data: any) {
+      delete data.id;
+      Object.keys(data).forEach(key => ((self as any)[key] = data[key]));
     }
   }));
 
@@ -680,7 +685,6 @@ export const TableStore = iRendererStore
           pristine: item,
           data: item,
           rowSpans: {},
-          modified: false,
           children:
             item && Array.isArray(item.children)
               ? initChildren(item.children, 1, key, id)
@@ -696,7 +700,7 @@ export const TableStore = iRendererStore
         arr = autoCombineCell(arr, self.columns, self.combineNum);
       }
 
-      self.rows.replace(arr as Array<IRow>);
+      replaceRow(arr);
       self.isNested = self.rows.some(item => item.children.length);
 
       const expand = self.footable && self.footable.expand;
@@ -717,6 +721,30 @@ export const TableStore = iRendererStore
       self.dragging = false;
     }
 
+    // 尽可能的复用 row
+    function replaceRow(arr: Array<SRow>) {
+      const pool = arr.concat();
+
+      // 把多的删了先
+      if (self.rows.length > arr.length) {
+        self.rows.splice(arr.length, self.rows.length - arr.length);
+      }
+
+      let index = 0;
+      const len = self.rows.length;
+      while (pool.length) {
+        const item = pool.shift()!;
+
+        if (index < len) {
+          self.rows[index].replaceWith(item);
+        } else {
+          const row = Row.create(item);
+          self.rows.push(row);
+        }
+        index++;
+      }
+    }
+
     function updateSelected(selected: Array<any>, valueField?: string) {
       self.selectedRows.clear();
       self.rows.forEach(item => {