From d204468818e3a5b7b044ad7fb1e7b3606f77b9cc Mon Sep 17 00:00:00 2001 From: zombiej Date: Mon, 9 Mar 2020 11:36:32 +0800 Subject: [PATCH 1/4] scroll erf --- examples/scrollX.tsx | 17 +++++--- src/Table.tsx | 102 +++++++++++++++++++++++++++++-------------- 2 files changed, 81 insertions(+), 38 deletions(-) diff --git a/examples/scrollX.tsx b/examples/scrollX.tsx index e5036a0df..dfd2b9e5a 100644 --- a/examples/scrollX.tsx +++ b/examples/scrollX.tsx @@ -3,8 +3,13 @@ import Table from '../src'; import '../assets/index.less'; const columns = [ - { title: 'title1', dataIndex: 'a', key: 'a', width: 100 }, - { title: 'title2', dataIndex: 'b', key: 'b', width: 100 }, + { + title: 'title1', + dataIndex: 'a', + key: 'a', + width: 100, + }, + { title: 'title2', dataIndex: 'b', key: 'b', width: 100, render: () => console.error('test') }, { title: 'title3', dataIndex: 'c', key: 'c', width: 100 }, { title: 'title4', dataIndex: 'b', key: 'd', width: 100 }, { title: 'title5', dataIndex: 'b', key: 'e', width: 100 }, @@ -19,15 +24,15 @@ const columns = [ const data = [ { a: '123', b: 'xxxxxxxx xxxxxxxx', d: 3, key: '1' }, - { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' }, - { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' }, - { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' }, + // { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' }, + // { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' }, + // { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' }, ]; const Demo = () => (

Scroll X

- +
); diff --git a/src/Table.tsx b/src/Table.tsx index 105178ced..f376446f8 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -74,6 +74,19 @@ const EMPTY_SCROLL_TARGET = {}; export const INTERNAL_HOOKS = 'rc-table-internal-hook'; +interface MemoTableContentProps { + children: React.ReactNode; + pingLeft: boolean; + pingRight: boolean; +} +const MemoTableContent = React.memo( + ({ children }) => { + console.error('render!'); + return children as React.ReactElement; + }, + (prev, next) => prev.pingLeft !== next.pingLeft || prev.pingRight !== next.pingRight, +); + export interface TableProps extends LegacyExpandableProps { prefixCls?: string; className?: string; @@ -371,13 +384,13 @@ function Table(props: TableProps { updateColsWidths(widths => { const newWidths = new Map(widths); newWidths.set(columnKey, width); return newWidths; }); - } + }, []); const [setScrollTarget, getScrollTarget] = useTimeoutLock(null); @@ -612,9 +625,11 @@ function Table(props: TableProps - {title && {title(mergedData)}} -
{groupTableNode}
- {footer && {footer(mergedData)}} + + {title && {title(mergedData)}} +
{groupTableNode}
+ {footer && {footer(mergedData)}} + ); @@ -622,34 +637,57 @@ function Table(props: TableProps{fullTable}; } + const TableContextValue = React.useMemo( + () => ({ + prefixCls, + getComponent, + scrollbarSize, + direction, + }), + [prefixCls, getComponent, scrollbarSize, direction], + ); + + const BodyContextValue = React.useMemo( + () => ({ + ...columnContext, + tableLayout: mergedTableLayout, + rowClassName, + expandedRowClassName, + componentWidth, + fixHeader, + fixColumn, + expandIcon: mergedExpandIcon, + expandableType, + expandRowByClick, + expandedRowRender, + onTriggerExpand, + expandIconColumnIndex, + indentSize, + }), + [ + columnContext, + mergedTableLayout, + rowClassName, + expandedRowClassName, + componentWidth, + fixHeader, + fixColumn, + mergedExpandIcon, + expandableType, + expandRowByClick, + expandedRowRender, + onTriggerExpand, + expandIconColumnIndex, + indentSize, + ], + ); + + const ResizeContextValue = React.useMemo(() => ({ onColumnResize }), [onColumnResize]); + return ( - - - {fullTable} + + + {fullTable} ); From 0fa12090680bba8d1ef5ea69062a8f20ee9d5ca0 Mon Sep 17 00:00:00 2001 From: zombiej Date: Mon, 9 Mar 2020 11:41:03 +0800 Subject: [PATCH 2/4] memo everything --- examples/scrollX.tsx | 8 ++++---- src/Table.tsx | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/examples/scrollX.tsx b/examples/scrollX.tsx index dfd2b9e5a..7eb3c555f 100644 --- a/examples/scrollX.tsx +++ b/examples/scrollX.tsx @@ -9,7 +9,7 @@ const columns = [ key: 'a', width: 100, }, - { title: 'title2', dataIndex: 'b', key: 'b', width: 100, render: () => console.error('test') }, + { title: 'title2', dataIndex: 'b', key: 'b', width: 100 }, { title: 'title3', dataIndex: 'c', key: 'c', width: 100 }, { title: 'title4', dataIndex: 'b', key: 'd', width: 100 }, { title: 'title5', dataIndex: 'b', key: 'e', width: 100 }, @@ -24,9 +24,9 @@ const columns = [ const data = [ { a: '123', b: 'xxxxxxxx xxxxxxxx', d: 3, key: '1' }, - // { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' }, - // { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' }, - // { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' }, + { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' }, + { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' }, + { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' }, ]; const Demo = () => ( diff --git a/src/Table.tsx b/src/Table.tsx index f376446f8..1f9222dd4 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -80,10 +80,7 @@ interface MemoTableContentProps { pingRight: boolean; } const MemoTableContent = React.memo( - ({ children }) => { - console.error('render!'); - return children as React.ReactElement; - }, + ({ children }) => children as React.ReactElement, (prev, next) => prev.pingLeft !== next.pingLeft || prev.pingRight !== next.pingRight, ); @@ -339,10 +336,13 @@ function Table(props: TableProps ({ + columns, + flattenColumns, + }), + [columns, flattenColumns], + ); // ====================== Scroll ====================== const fullTableRef = React.useRef(); From 0ee361464e979dabdf1e1917d6bd0797a3332ad4 Mon Sep 17 00:00:00 2001 From: zombiej Date: Mon, 9 Mar 2020 12:23:39 +0800 Subject: [PATCH 3/4] update deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2e73bef84..5274eaa0b 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "prop-types": "^15.5.8", "raf": "^3.4.1", "rc-resize-observer": "^0.1.2", - "rc-util": "^4.19.0", + "rc-util": "^4.20.1", "react-lifecycles-compat": "^3.0.2", "shallowequal": "^1.1.0" }, From 4e2a31b5eb152927d4d3a3b2c9605c751681c0e4 Mon Sep 17 00:00:00 2001 From: zombiej Date: Mon, 9 Mar 2020 12:26:23 +0800 Subject: [PATCH 4/4] comment --- src/Table.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Table.tsx b/src/Table.tsx index 1f9222dd4..53a7ab595 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -81,6 +81,8 @@ interface MemoTableContentProps { } const MemoTableContent = React.memo( ({ children }) => children as React.ReactElement, + // No additional render when pinged status change. + // This is not a bug. (prev, next) => prev.pingLeft !== next.pingLeft || prev.pingRight !== next.pingRight, );