Skip to content

Commit ecf3fdb

Browse files
zombieJzombieJ
authored
refactor: Body related component rm useMemo & wrap with responsiveImmutable (#923)
* refactor: Body responsive * refactor: BodyRow responsive * refactor: Remove duplicate key * chore: add record of ExpandableRow * refactor: Rm ExpandedRow memo * chore: fix lint
1 parent 0a49fc2 commit ecf3fdb

File tree

12 files changed

+179
-150
lines changed

12 files changed

+179
-150
lines changed

‎src/Body/BodyRow.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { useContext } from '@rc-component/context';
1+
import { responseImmutable, useContext } from '@rc-component/context';
22
import classNames from 'classnames';
33
import * as React from 'react';
44
import Cell from '../Cell';
55
import TableContext from '../context/TableContext';
6+
import devRenderTimes from '../hooks/useRenderTimes';
67
import type {
78
ColumnType,
89
CustomizeComponent,
@@ -19,7 +20,6 @@ export interface BodyRowProps<RecordType> {
1920
renderIndex: number;
2021
className?: string;
2122
style?: React.CSSProperties;
22-
recordKey: Key;
2323
expandedKeys: Set<Key>;
2424
rowComponent: CustomizeComponent;
2525
cellComponent: CustomizeComponent;
@@ -35,6 +35,10 @@ export interface BodyRowProps<RecordType> {
3535
function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
3636
props: BodyRowProps<RecordType>,
3737
) {
38+
if (process.env.NODE_ENV !== 'production') {
39+
devRenderTimes(props);
40+
}
41+
3842
const {
3943
className,
4044
style,
@@ -80,7 +84,24 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
8084
]);
8185
const [expandRended, setExpandRended] = React.useState(false);
8286

83-
const expanded = expandedKeys && expandedKeys.has(props.recordKey);
87+
if (process.env.NODE_ENV !== 'production') {
88+
devRenderTimes({
89+
prefixCls,
90+
fixedInfoList,
91+
flattenColumns,
92+
expandableType,
93+
expandRowByClick,
94+
onTriggerExpand,
95+
rowClassName,
96+
expandedRowClassName,
97+
indentSize,
98+
expandIcon,
99+
expandedRowRender,
100+
expandIconColumnIndex,
101+
});
102+
}
103+
104+
const expanded = expandedKeys && expandedKeys.has(rowKey);
84105

85106
React.useEffect(() => {
86107
if (expanded) {
@@ -230,4 +251,4 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
230251

231252
BodyRow.displayName = 'BodyRow';
232253

233-
export default BodyRow;
254+
export default responseImmutable(BodyRow);

‎src/Body/ExpandedRow.tsx‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useContext } from '@rc-component/context';
22
import * as React from 'react';
33
import Cell from '../Cell';
44
import TableContext from '../context/TableContext';
5+
import devRenderTimes from '../hooks/useRenderTimes';
56
import type { CustomizeComponent } from '../interface';
67

78
export interface ExpandedRowProps {
@@ -15,66 +16,58 @@ export interface ExpandedRowProps {
1516
isEmpty: boolean;
1617
}
1718

18-
function ExpandedRow({
19-
prefixCls,
20-
children,
21-
component: Component,
22-
cellComponent,
23-
className,
24-
expanded,
25-
colSpan,
26-
isEmpty,
27-
}: ExpandedRowProps) {
19+
function ExpandedRow(props: ExpandedRowProps) {
20+
if (process.env.NODE_ENV !== 'production') {
21+
devRenderTimes(props);
22+
}
23+
24+
const {
25+
prefixCls,
26+
children,
27+
component: Component,
28+
cellComponent,
29+
className,
30+
expanded,
31+
colSpan,
32+
isEmpty,
33+
} = props;
34+
2835
const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
2936
TableContext,
3037
['scrollbarSize', 'fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
3138
);
3239

3340
// Cache render node
34-
return React.useMemo(() => {
35-
let contentNode = children;
36-
37-
if (isEmpty ? horizonScroll : fixColumn) {
38-
contentNode = (
39-
<div
40-
style={{
41-
width: componentWidth - (fixHeader ? scrollbarSize : 0),
42-
position: 'sticky',
43-
left: 0,
44-
overflow: 'hidden',
45-
}}
46-
className={`${prefixCls}-expanded-row-fixed`}
47-
>
48-
{componentWidth !== 0 && contentNode}
49-
</div>
50-
);
51-
}
41+
let contentNode = children;
5242

53-
return (
54-
<Component
55-
className={className}
43+
if (isEmpty ? horizonScroll : fixColumn) {
44+
contentNode = (
45+
<div
5646
style={{
57-
display: expanded ? null : 'none',
47+
width: componentWidth - (fixHeader ? scrollbarSize : 0),
48+
position: 'sticky',
49+
left: 0,
50+
overflow: 'hidden',
5851
}}
52+
className={`${prefixCls}-expanded-row-fixed`}
5953
>
60-
<Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
61-
{contentNode}
62-
</Cell>
63-
</Component>
54+
{componentWidth !== 0 && contentNode}
55+
</div>
6456
);
65-
}, [
66-
children,
67-
Component,
68-
className,
69-
expanded,
70-
colSpan,
71-
isEmpty,
72-
scrollbarSize,
73-
componentWidth,
74-
fixColumn,
75-
fixHeader,
76-
horizonScroll,
77-
]);
57+
}
58+
59+
return (
60+
<Component
61+
className={className}
62+
style={{
63+
display: expanded ? null : 'none',
64+
}}
65+
>
66+
<Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
67+
{contentNode}
68+
</Cell>
69+
</Component>
70+
);
7871
}
7972

8073
export default ExpandedRow;

‎src/Body/index.tsx‎

Lines changed: 66 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { useContext } from '@rc-component/context';
1+
import { responseImmutable, useContext } from '@rc-component/context';
22
import * as React from 'react';
33
import type { PerfRecord } from '../context/PerfContext';
44
import PerfContext from '../context/PerfContext';
55
import TableContext from '../context/TableContext';
66
import useFlattenRecords from '../hooks/useFlattenRecords';
7+
import devRenderTimes from '../hooks/useRenderTimes';
78
import type { GetComponentProps, GetRowKey, Key } from '../interface';
89
import { getColumnsKey } from '../utils/valueUtil';
910
import BodyRow from './BodyRow';
@@ -21,16 +22,22 @@ export interface BodyProps<RecordType> {
2122
childrenColumnName: string;
2223
}
2324

24-
function Body<RecordType>({
25-
data,
26-
getRowKey,
27-
measureColumnWidth,
28-
expandedKeys,
29-
onRow,
30-
rowExpandable,
31-
emptyNode,
32-
childrenColumnName,
33-
}: BodyProps<RecordType>) {
25+
function Body<RecordType>(props: BodyProps<RecordType>) {
26+
if (process.env.NODE_ENV !== 'production') {
27+
devRenderTimes(props);
28+
}
29+
30+
const {
31+
data,
32+
getRowKey,
33+
measureColumnWidth,
34+
expandedKeys,
35+
onRow,
36+
rowExpandable,
37+
emptyNode,
38+
childrenColumnName,
39+
} = props;
40+
3441
const { prefixCls, getComponent, onColumnResize, flattenColumns } = useContext(TableContext, [
3542
'prefixCls',
3643
'getComponent',
@@ -47,58 +54,57 @@ function Body<RecordType>({
4754
});
4855

4956
// ====================== Render ======================
50-
const bodyNode = React.useMemo(() => {
51-
const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
52-
const trComponent = getComponent(['body', 'row'], 'tr');
53-
const tdComponent = getComponent(['body', 'cell'], 'td');
54-
const thComponent = getComponent(['body', 'cell'], 'th');
57+
const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
58+
const trComponent = getComponent(['body', 'row'], 'tr');
59+
const tdComponent = getComponent(['body', 'cell'], 'td');
60+
const thComponent = getComponent(['body', 'cell'], 'th');
5561

56-
let rows: React.ReactNode;
57-
if (data.length) {
58-
rows = flattenData.map((item, idx) => {
59-
const { record, indent, index: renderIndex } = item;
62+
let rows: React.ReactNode;
63+
if (data.length) {
64+
rows = flattenData.map((item, idx) => {
65+
const { record, indent, index: renderIndex } = item;
6066

61-
const key = getRowKey(record, idx);
67+
const key = getRowKey(record, idx);
6268

63-
return (
64-
<BodyRow
65-
key={key}
66-
rowKey={key}
67-
record={record}
68-
recordKey={key}
69-
index={idx}
70-
renderIndex={renderIndex}
71-
rowComponent={trComponent}
72-
cellComponent={tdComponent}
73-
scopeCellComponent={thComponent}
74-
expandedKeys={expandedKeys}
75-
onRow={onRow}
76-
getRowKey={getRowKey}
77-
rowExpandable={rowExpandable}
78-
childrenColumnName={childrenColumnName}
79-
indent={indent}
80-
/>
81-
);
82-
});
83-
} else {
84-
rows = (
85-
<ExpandedRow
86-
expanded
87-
className={`${prefixCls}-placeholder`}
88-
prefixCls={prefixCls}
89-
component={trComponent}
69+
return (
70+
<BodyRow
71+
key={key}
72+
rowKey={key}
73+
record={record}
74+
index={idx}
75+
renderIndex={renderIndex}
76+
rowComponent={trComponent}
9077
cellComponent={tdComponent}
91-
colSpan={flattenColumns.length}
92-
isEmpty
93-
>
94-
{emptyNode}
95-
</ExpandedRow>
78+
scopeCellComponent={thComponent}
79+
expandedKeys={expandedKeys}
80+
onRow={onRow}
81+
getRowKey={getRowKey}
82+
rowExpandable={rowExpandable}
83+
childrenColumnName={childrenColumnName}
84+
indent={indent}
85+
/>
9686
);
97-
}
87+
});
88+
} else {
89+
rows = (
90+
<ExpandedRow
91+
expanded
92+
className={`${prefixCls}-placeholder`}
93+
prefixCls={prefixCls}
94+
component={trComponent}
95+
cellComponent={tdComponent}
96+
colSpan={flattenColumns.length}
97+
isEmpty
98+
>
99+
{emptyNode}
100+
</ExpandedRow>
101+
);
102+
}
98103

99-
const columnsKey = getColumnsKey(flattenColumns);
104+
const columnsKey = getColumnsKey(flattenColumns);
100105

101-
return (
106+
return (
107+
<PerfContext.Provider value={perfRef.current}>
102108
<WrapperComponent className={`${prefixCls}-tbody`}>
103109
{/* Measure body column width with additional hidden col */}
104110
{measureColumnWidth && (
@@ -111,27 +117,10 @@ function Body<RecordType>({
111117

112118
{rows}
113119
</WrapperComponent>
114-
);
115-
}, [
116-
data,
117-
prefixCls,
118-
onRow,
119-
measureColumnWidth,
120-
expandedKeys,
121-
getRowKey,
122-
getComponent,
123-
emptyNode,
124-
flattenColumns,
125-
childrenColumnName,
126-
onColumnResize,
127-
rowExpandable,
128-
flattenData,
129-
]);
130-
131-
return <PerfContext.Provider value={perfRef.current}>{bodyNode}</PerfContext.Provider>;
120+
</PerfContext.Provider>
121+
);
132122
}
133123

134-
const MemoBody = React.memo(Body);
135-
MemoBody.displayName = 'Body';
124+
Body.displayName = 'Body';
136125

137-
export default MemoBody;
126+
export default responseImmutable(Body);

‎src/FixedHolder/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ColGroup from '../ColGroup';
77
import TableContext from '../context/TableContext';
88
import type { HeaderProps } from '../Header/Header';
99
import devRenderTimes from '../hooks/useRenderTimes';
10-
import type { ColumnsType, ColumnType } from '../interface';
10+
import type { ColumnsType, ColumnType, Direction } from '../interface';
1111

1212
function useColumnWidth(colWidths: readonly number[], columCount: number) {
1313
return useMemo(() => {
@@ -30,7 +30,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
3030
maxContentScroll: boolean;
3131
colWidths: readonly number[];
3232
columCount: number;
33-
direction: 'ltr' | 'rtl';
33+
direction: Direction;
3434
fixHeader: boolean;
3535
stickyTopOffset?: number;
3636
stickyBottomOffset?: number;

0 commit comments

Comments
 (0)