feat: Column support shouldCellUpdate (#466)

* support shouldCellUpdate

* add test case

Author: zombieJ

.eslintrc.js

@@ -16,5 +16,6 @@ module.exports = {
     'import/no-named-as-default-member': 0,
     'jsx-a11y/label-has-for': 0,
     'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/control-has-associated-label': 0,
   },
 };

src/Body/BodyRow.tsx

@@ -158,6 +158,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
             index={index}
             dataIndex={dataIndex}
             render={render}
+            shouldCellUpdate={column.shouldCellUpdate}
             {...fixedInfo}
             appendNode={appendCellNode}
             additionalProps={additionalCellProps}

src/Cell/index.tsx

@@ -41,6 +41,8 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   ellipsis?: boolean;
   align?: AlignType;
 
+  shouldCellUpdate?: (record: RecordType) => boolean;
+
   // Fixed
   fixLeft?: number | false;
   fixRight?: number | false;
@@ -197,7 +199,15 @@ function Cell<RecordType extends DefaultRecordType>(
   );
 }
 
-const RefCell = React.forwardRef(Cell);
+const RefCell = React.forwardRef<any, CellProps<any>>(Cell);
 RefCell.displayName = 'Cell';
 
-export default RefCell;
+const MemoCell = React.memo(RefCell, (_, next: CellProps<any>) => {
+  if (next.shouldCellUpdate) {
+    return !next.shouldCellUpdate(next.record);
+  }
+
+  return false;
+});
+
+export default MemoCell;

src/interface.ts

@@ -79,6 +79,7 @@ export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
     record: RecordType,
     index: number,
   ) => React.ReactNode | RenderedCell<RecordType>;
+  shouldCellUpdate?: (record: RecordType) => boolean;
   rowSpan?: number;
   width?: number | string;
   onCell?: GetComponentProps<RecordType>;

tests/Table.spec.js

@@ -925,4 +925,48 @@ describe('Table.Basic', () => {
       );
     }).not.toThrow();
   });
+
+  it('shouldCellUpdate', () => {
+    const record = { key: 1 };
+    let shouldUpdate = false;
+    let renderTimes = 0;
+
+    const Demo = () => {
+      const [, forceUpdate] = React.useState({});
+
+      return (
+        <>
+          <Table
+            data={[record]}
+            columns={[
+              {
+                dataIndex: 'key',
+                shouldCellUpdate: () => shouldUpdate,
+                render() {
+                  renderTimes += 1;
+                  return null;
+                },
+              },
+            ]}
+          />
+          <button
+            type="button"
+            onClick={() => {
+              forceUpdate({});
+            }}
+          />
+        </>
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+    renderTimes = 0;
+
+    wrapper.find('button').simulate('click');
+    expect(renderTimes).toEqual(0);
+
+    shouldUpdate = true;
+    wrapper.find('button').simulate('click');
+    expect(renderTimes).toEqual(1);
+  });
 });