refactor: Header & Footer & Fixed Table with responsiveImmutable (#922)

* refactor: FixedHeader cache

* refactor: all FixedHolder

* refactor: Header

* docs: update demo

* refactor: Footer

Author: zombieJ

docs/examples/simple.tsx

@@ -29,7 +29,7 @@ const Demo = () => {
     <>
       <button
         onClick={() => {
-          setCount(count => count + 1);
+          setCount(val => val + 1);
         }}
       >
         Click {count} times

src/FixedHolder/index.tsx

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import ColGroup from '../ColGroup';
 import TableContext from '../context/TableContext';
 import type { HeaderProps } from '../Header/Header';
-import useRenderTimes from '../hooks/useRenderTimes';
+import devRenderTimes from '../hooks/useRenderTimes';
 import type { ColumnsType, ColumnType } from '../interface';
 
 function useColumnWidth(colWidths: readonly number[], columCount: number) {
@@ -40,7 +40,9 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
 }
 
 const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>((props, ref) => {
-  useRenderTimes(props);
+  if (process.env.NODE_ENV !== 'production') {
+    devRenderTimes(props);
+  }
 
   const {
     className,

src/Footer/index.tsx

@@ -1,6 +1,7 @@
+import { responseImmutable, useContext } from '@rc-component/context';
 import * as React from 'react';
 import TableContext from '../context/TableContext';
-import { useContext } from '@rc-component/context';
+import devRenderTimes from '../hooks/useRenderTimes';
 import type { ColumnType, StickyOffsets } from '../interface';
 import Summary from './Summary';
 import SummaryContext from './SummaryContext';
@@ -13,7 +14,13 @@ export interface FooterProps<RecordType> {
   flattenColumns: FlattenColumns<RecordType>;
 }
 
-function Footer<RecordType>({ children, stickyOffsets, flattenColumns }: FooterProps<RecordType>) {
+function Footer<RecordType>(props: FooterProps<RecordType>) {
+  if (process.env.NODE_ENV !== 'production') {
+    devRenderTimes(props);
+  }
+
+  const { children, stickyOffsets, flattenColumns } = props;
+
   const prefixCls = useContext(TableContext, 'prefixCls');
 
   const lastColumnIndex = flattenColumns.length - 1;
@@ -35,6 +42,6 @@ function Footer<RecordType>({ children, stickyOffsets, flattenColumns }: FooterP
   );
 }
 
-export default Footer;
+export default responseImmutable(Footer);
 
 export const FooterComponents = Summary;

src/Header/Header.tsx

@@ -1,6 +1,7 @@
+import { responseImmutable, useContext } from '@rc-component/context';
 import * as React from 'react';
 import TableContext from '../context/TableContext';
-import { useContext } from '@rc-component/context';
+import devRenderTimes from '../hooks/useRenderTimes';
 import type {
   CellType,
   ColumnGroupType,
@@ -89,16 +90,14 @@ export interface HeaderProps<RecordType> {
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
 }
 
-function Header<RecordType>({
-  stickyOffsets,
-  columns,
-  flattenColumns,
-  onHeaderRow,
-}: HeaderProps<RecordType>): React.ReactElement {
-  const { prefixCls, getComponent } = useContext(TableContext, [
-    'prefixCls',
-    'getComponent',
-  ]);
+function Header<RecordType>(props: HeaderProps<RecordType>): React.ReactElement {
+  if (process.env.NODE_ENV !== 'production') {
+    devRenderTimes(props);
+  }
+
+  const { stickyOffsets, columns, flattenColumns, onHeaderRow } = props;
+
+  const { prefixCls, getComponent } = useContext(TableContext, ['prefixCls', 'getComponent']);
   const rows: CellType<RecordType>[][] = React.useMemo(() => parseHeaderRows(columns), [columns]);
 
   const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
@@ -129,4 +128,4 @@ function Header<RecordType>({
   );
 }
 
-export default Header;
+export default responseImmutable(Header);

src/Table.tsx

@@ -40,7 +40,7 @@ import Body from './Body';
 import ColGroup from './ColGroup';
 import { EXPAND_COLUMN } from './constant';
 import TableContext from './context/TableContext';
-import FixedHolder from './FixedHolder';
+import FixedHolder, { FixedHeaderProps } from './FixedHolder';
 import Footer, { FooterComponents } from './Footer';
 import type { SummaryProps } from './Footer/Summary';
 import Summary from './Footer/Summary';
@@ -322,7 +322,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     useSticky(sticky, prefixCls);
 
   // Footer (Fix footer must fixed header)
-  const summaryNode = summary?.(mergedData);
+  const summaryNode = React.useMemo(() => summary?.(mergedData), [summary, mergedData]);
   const fixFooter =
     (fixHeader || isSticky) &&
     React.isValidElement(summaryNode) &&
@@ -473,7 +473,26 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     }
   });
 
-  // ====================== Render ======================
+  // ========================================================================
+  // ==                               Render                               ==
+  // ========================================================================
+  // =================== Render: Func ===================
+  const renderFixedHeaderTable = React.useCallback<FixedHeaderProps<RecordType>['children']>(
+    fixedHolderPassProps => (
+      <>
+        <Header {...fixedHolderPassProps} />
+        {fixFooter === 'top' && <Footer {...fixedHolderPassProps}>{summaryNode}</Footer>}
+      </>
+    ),
+    [fixFooter, summaryNode],
+  );
+
+  const renderFixedFooterTable = React.useCallback<FixedHeaderProps<RecordType>['children']>(
+    fixedHolderPassProps => <Footer {...fixedHolderPassProps}>{summaryNode}</Footer>,
+    [summaryNode],
+  );
+
+  // =================== Render: Node ===================
   const TableComponent = getComponent(['table'], 'table');
 
   // Table layout
@@ -629,12 +648,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
             className={`${prefixCls}-header`}
             ref={scrollHeaderRef}
           >
-            {fixedHolderPassProps => (
-              <>
-                <Header {...fixedHolderPassProps} />
-                {fixFooter === 'top' && <Footer {...fixedHolderPassProps}>{summaryNode}</Footer>}
-              </>
-            )}
+            {renderFixedHeaderTable}
           </FixedHolder>
         )}
 
@@ -649,7 +663,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
             className={`${prefixCls}-summary`}
             ref={scrollSummaryRef}
           >
-            {fixedHolderPassProps => <Footer {...fixedHolderPassProps}>{summaryNode}</Footer>}
+            {renderFixedFooterTable}
           </FixedHolder>
         )}
 

src/hooks/useRenderTimes.tsx

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 import * as React from 'react';
 
-function useRenderTimes<T extends object>(props?: T) {
+function useRenderTimes<T extends object>(props?: T, debug?: string) {
   // Render times
   const timesRef = React.useRef(0);
   timesRef.current += 1;
@@ -25,6 +25,10 @@ function useRenderTimes<T extends object>(props?: T) {
   React.useDebugValue(timesRef.current);
   React.useDebugValue(keysRef.current.join(', '));
 
+  if (debug) {
+    console.log(`${debug}:`, timesRef.current, keysRef.current);
+  }
+
   return timesRef.current;
 }