perf: extract expanded row context (#705)

* docs: Add fixedcolumns resize demo

* perf: extract expanded row context

Author: curly210102

docs/demo/fixedColumns-resize.md

@@ -0,0 +1,3 @@
+## fixedColumns-resize
+
+<code src="../examples/fixedColumns-resize.tsx">

docs/examples/fixedColumns-resize.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useCallback } from 'react';
+import Table from 'rc-table';
+import '../../assets/index.less';
+import type { ColumnType } from '@/interface';
+
+interface RecordType {
+  a: string;
+  b?: string;
+  c?: string;
+  d: number;
+  key: string;
+}
+
+const defaultColumns: ColumnType<RecordType>[] = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true },
+  { title: 'title3', dataIndex: 'c', key: 'c' },
+  { title: 'title4', dataIndex: 'b', key: 'd' },
+  { title: 'title5', dataIndex: 'b', key: 'e' },
+  { title: 'title6', dataIndex: 'b', key: 'f' },
+  { title: 'title8', dataIndex: 'b', key: 'h' },
+  { title: 'title9', dataIndex: 'b', key: 'i' },
+  { title: 'title11', dataIndex: 'b', key: 'j' },
+  { title: 'title12', dataIndex: 'b', key: 'j1' },
+  { title: 'title13', dataIndex: 'b', key: 'j2' },
+  { title: 'title14', dataIndex: 'b', key: 'j3' },
+  { title: 'title15', dataIndex: 'b', key: 'j4' },
+  { title: 'title16', dataIndex: 'b', key: 'j5' },
+  { title: 'title17', dataIndex: 'b', key: 'j6' },
+  { title: 'title18', dataIndex: 'b', key: 'j7' },
+  { title: 'title19', dataIndex: 'b', key: 'k', width: 50, fixed: 'right' },
+  { title: 'title20', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
+];
+
+const data: RecordType[] = Array.from(new Array(200).fill(1), (v, index) => {
+  return {
+    a: '123',
+    b: 'xxxxx',
+    d: 3,
+    key: index + '',
+  };
+});
+
+const Demo = () => {
+  const [isShown, setIsShown] = useState(false);
+  const [renderTime, setRenderTime] = useState(0);
+  const [isFixed, setIsFixed] = useState(true);
+  const [columns, setColumns] = useState(defaultColumns);
+  const onToggleSideBar = useCallback(() => {
+    const s = window.performance.now();
+    setIsShown(v => !v);
+
+    setTimeout(() => {
+      setRenderTime(+(window.performance.now() - s).toFixed(2));
+    });
+  }, []);
+
+  const onToggleFixed = useCallback(() => {
+    setIsFixed(v => !v);
+  }, []);
+
+  const onRemoveColumn = useCallback(() => {
+    setColumns(state => {
+      const newState = [...state];
+      newState.splice(
+        state.findIndex(({ fixed }) => !fixed),
+        1,
+      );
+      return newState;
+    });
+  }, []);
+
+  const onAddColumn = useCallback(() => {
+    setColumns(state => {
+      const newState = [...state];
+      newState.splice(
+        state.findIndex(({ fixed }) => !fixed),
+        0,
+        { title: 'new title', dataIndex: 'b', key: Math.random().toString(16).slice(2) },
+      );
+      return newState;
+    });
+  }, []);
+
+  const expandedRowRender = useCallback(({ b, c }) => b || c, []);
+
+  return (
+    <div>
+      <div>
+        <button onClick={onToggleSideBar}>切换侧边栏展开状态</button>
+        <button onClick={onToggleFixed}>切换固定列</button>
+        <button onClick={onRemoveColumn}>删除列</button>
+        <button onClick={onAddColumn}>增加列</button>
+        <p>更新用时：{renderTime} ms</p>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          width: '800px',
+          resize: 'both',
+          padding: '12px',
+          border: '1px solid #333',
+          height: '80vh',
+          overflow: 'auto',
+        }}
+      >
+        <div style={{ flex: `0 0 ${isShown ? '10px' : '80px'}` }} />
+        <div style={{ flex: 1, overflow: 'hidden' }}>
+          <Table
+            columns={columns}
+            scroll={isFixed ? { x: 1200 } : null}
+            data={data}
+            expandedRowRender={expandedRowRender}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

src/Body/BodyRow.tsx

@@ -49,10 +49,6 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   } = props;
   const { prefixCls, fixedInfoList } = React.useContext(TableContext);
   const {
-    fixHeader,
-    fixColumn,
-    horizonScroll,
-    componentWidth,
     flattenColumns,
     expandableType,
     expandRowByClick,
@@ -197,11 +193,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
           computedExpandedRowClassName,
         )}
         prefixCls={prefixCls}
-        fixHeader={fixHeader}
-        fixColumn={fixColumn}
-        horizonScroll={horizonScroll}
         component={RowComponent}
-        componentWidth={componentWidth}
         cellComponent={cellComponent}
         colSpan={flattenColumns.length}
       >

src/Body/ExpandedRow.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react';
-import { CustomizeComponent } from '../interface';
+import type { CustomizeComponent } from '../interface';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
+import ExpandedRowContext from '../context/ExpandedRowContext';
 
 export interface ExpandedRowProps {
   prefixCls: string;
   component: CustomizeComponent;
   cellComponent: CustomizeComponent;
-  fixHeader: boolean;
-  fixColumn: boolean;
-  horizonScroll: boolean;
-  componentWidth: number;
   className: string;
   expanded: boolean;
   children: React.ReactNode;
@@ -22,15 +19,12 @@ function ExpandedRow({
   children,
   component: Component,
   cellComponent,
-  fixHeader,
-  fixColumn,
-  horizonScroll,
   className,
   expanded,
-  componentWidth,
   colSpan,
 }: ExpandedRowProps) {
   const { scrollbarSize } = React.useContext(TableContext);
+  const { fixHeader, fixColumn, componentWidth } = React.useContext(ExpandedRowContext);
 
   // Cache render node
   return React.useMemo(() => {
@@ -67,13 +61,13 @@ function ExpandedRow({
   }, [
     children,
     Component,
-    fixHeader,
-    horizonScroll,
     className,
     expanded,
-    componentWidth,
     colSpan,
     scrollbarSize,
+    componentWidth,
+    fixColumn,
+    fixHeader,
   ]);
 }
 

src/Body/index.tsx

@@ -35,8 +35,7 @@ function Body<RecordType>({
   const [endRow, setEndRow] = React.useState(-1);
   const { onColumnResize } = React.useContext(ResizeContext);
   const { prefixCls, getComponent } = React.useContext(TableContext);
-  const { fixHeader, horizonScroll, flattenColumns, componentWidth } =
-    React.useContext(BodyContext);
+  const { flattenColumns } = React.useContext(BodyContext);
 
   const flattenData: { record: RecordType; indent: number }[] = useFlattenRecords<RecordType>(
     data,
@@ -91,11 +90,7 @@ function Body<RecordType>({
           expanded
           className={`${prefixCls}-placeholder`}
           prefixCls={prefixCls}
-          fixHeader={fixHeader}
-          fixColumn={horizonScroll}
-          horizonScroll={horizonScroll}
           component={trComponent}
-          componentWidth={componentWidth}
           cellComponent={tdComponent}
           colSpan={flattenColumns.length}
         >
@@ -138,12 +133,9 @@ function Body<RecordType>({
     expandedKeys,
     getRowKey,
     getComponent,
-    componentWidth,
     emptyNode,
     flattenColumns,
     childrenColumnName,
-    fixHeader,
-    horizonScroll,
     onColumnResize,
     rowExpandable,
     flattenData,

src/Table.tsx

@@ -76,6 +76,7 @@ import FixedHolder from './FixedHolder';
 import type { SummaryProps } from './Footer/Summary';
 import Summary from './Footer/Summary';
 import StickyContext from './context/StickyContext';
+import ExpandedRowContext from './context/ExpandedRowContext';
 import { EXPAND_COLUMN } from './constant';
 
 // Used for conditions cache
@@ -807,10 +808,6 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       tableLayout: mergedTableLayout,
       rowClassName,
       expandedRowClassName,
-      componentWidth,
-      fixHeader,
-      fixColumn,
-      horizonScroll,
       expandIcon: mergedExpandIcon,
       expandableType,
       expandRowByClick,
@@ -824,10 +821,6 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       mergedTableLayout,
       rowClassName,
       expandedRowClassName,
-      componentWidth,
-      fixHeader,
-      fixColumn,
-      horizonScroll,
       mergedExpandIcon,
       expandableType,
       expandRowByClick,
@@ -838,13 +831,24 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     ],
   );
 
+  const ExpandedRowContextValue = React.useMemo(
+    () => ({
+      componentWidth,
+      fixHeader,
+      fixColumn,
+    }),
+    [componentWidth, fixHeader, fixColumn],
+  );
+
   const ResizeContextValue = React.useMemo(() => ({ onColumnResize }), [onColumnResize]);
 
   return (
     <StickyContext.Provider value={supportSticky}>
       <TableContext.Provider value={TableContextValue}>
         <BodyContext.Provider value={BodyContextValue}>
-          <ResizeContext.Provider value={ResizeContextValue}>{fullTable}</ResizeContext.Provider>
+          <ExpandedRowContext.Provider value={ExpandedRowContextValue}>
+            <ResizeContext.Provider value={ResizeContextValue}>{fullTable}</ResizeContext.Provider>
+          </ExpandedRowContext.Provider>
         </BodyContext.Provider>
       </TableContext.Provider>
     </StickyContext.Provider>

src/context/BodyContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {
+import type {
   ColumnType,
   DefaultRecordType,
   ColumnsType,
@@ -18,11 +18,7 @@ export interface BodyContextProps<RecordType = DefaultRecordType> {
   columns: ColumnsType<RecordType>;
   flattenColumns: readonly ColumnType<RecordType>[];
 
-  componentWidth: number;
   tableLayout: TableLayout;
-  fixHeader: boolean;
-  fixColumn: boolean;
-  horizonScroll: boolean;
 
   indentSize: number;
   expandableType: ExpandableType;

src/context/ExpandedRowContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface ExpandedRowProps {
+  componentWidth: number;
+  fixHeader: boolean;
+  fixColumn: boolean;
+}
+
+const ExpandedRowContext = React.createContext<ExpandedRowProps>(null);
+
+export default ExpandedRowContext;