fix: hover perf (#842)

* fix: hover perf

* test: add test case

Author: zombieJ

docs/demo/jsx.md

@@ -1,3 +1,3 @@
-## jsx
+## Hover Perf
 
-<code src="../examples/jsx.tsx">
+<code src="../examples/hover-perf.tsx">

docs/examples/hover-perf.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+const CellExample = ({ data, count }) => {
+  console.log('rerender ' + Date.now());
+  return <>{count + ' ' + data.index}</>;
+};
+
+// const dataSource = Array.from({ length: 10000 }).map((_, index) => ({ index }));
+const dataSource = Array.from({ length: 100 }).map((_, index) => ({ index, key: index }));
+
+const ProblemTable = () => {
+  const columns = [
+    {
+      title: 'Grouped by 10',
+      onCell: (_, index) => ({ rowSpan: index % 10 === 0 ? 10 : 0 }),
+      render: (_, record) => (
+        <span>
+          {record.index}-{record.index + 10}
+        </span>
+      ),
+    },
+    {
+      title: 'one',
+      render: (_, record) => <CellExample count="one" data={record} />,
+    },
+    {
+      title: 'two',
+      render: (_, record) => <CellExample count="two" data={record} />,
+    },
+    {
+      title: 'three',
+      render: (_, record) => <CellExample count="three" data={record} />,
+    },
+    {
+      title: 'four',
+      render: (_, record) => <CellExample count="four" data={record} />,
+    },
+  ];
+  return <Table tableLayout="fixed" data={dataSource} columns={columns} />;
+};
+
+export default ProblemTable;

src/Body/index.tsx

@@ -54,11 +54,6 @@ function Body<RecordType>({
     setEndRow(end);
   }, []);
 
-  const hoverContext = React.useMemo(
-    () => ({ startRow, endRow, onHover }),
-    [onHover, startRow, endRow],
-  );
-
   // ====================== Render ======================
   const bodyNode = React.useMemo(() => {
     const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
@@ -141,7 +136,9 @@ function Body<RecordType>({
 
   return (
     <PerfContext.Provider value={perfRef.current}>
-      <HoverContext.Provider value={hoverContext}>{bodyNode}</HoverContext.Provider>
+      <HoverContext.Provider value={{ startRow, endRow, onHover }}>
+        {bodyNode}
+      </HoverContext.Provider>
     </PerfContext.Provider>
   );
 }

src/Cell/index.tsx

@@ -18,6 +18,7 @@ import HoverContext from '../context/HoverContext';
 import type { HoverContextProps } from '../context/HoverContext';
 import warning from 'rc-util/lib/warning';
 import PerfContext from '../context/PerfContext';
+import { useContextSelector } from '../ContextSelector';
 
 /** Check if cell is in hover range */
 function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) {
@@ -327,14 +328,20 @@ const MemoCell = React.memo(
 
 /** Inject hover data here, we still wish MemoCell keep simple `shouldCellUpdate` logic */
 const WrappedCell = React.forwardRef((props: CellProps<any>, ref: React.Ref<any>) => {
-  const { onHover, startRow, endRow } = React.useContext(HoverContext);
   const { index, additionalProps = {}, colSpan, rowSpan } = props;
   const { colSpan: cellColSpan, rowSpan: cellRowSpan } = additionalProps;
 
   const mergedColSpan = colSpan ?? cellColSpan;
   const mergedRowSpan = rowSpan ?? cellRowSpan;
 
-  const hovering = inHoverRange(index, mergedRowSpan || 1, startRow, endRow);
+  const { onHover, hovering } = useContextSelector(HoverContext, cxt => {
+    const isHovering = inHoverRange(index, mergedRowSpan || 1, cxt?.startRow, cxt?.endRow);
+
+    return {
+      onHover: cxt?.onHover,
+      hovering: isHovering,
+    };
+  });
 
   return (
     <MemoCell

src/ContextSelector/index.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import shallowEqual from 'shallowequal';
+
+export type Selector<T, O = T> = (value: T) => O;
+
+export type Trigger<T> = (value: T) => void;
+
+export type Listeners<T> = Set<Trigger<T>>;
+
+export interface Context<T> {
+  getValue: () => T;
+  listeners: Listeners<T>;
+}
+
+export interface ContextSelectorProviderProps<T> {
+  value: T;
+  children?: React.ReactNode;
+}
+
+export interface ReturnCreateContext<T> {
+  Context: React.Context<Context<T>>;
+  Provider: React.ComponentType<ContextSelectorProviderProps<T>>;
+}
+
+export function createContext<T>(): ReturnCreateContext<T> {
+  const Context = React.createContext<Context<T>>(null as any);
+
+  const Provider = ({ value, children }: ContextSelectorProviderProps<T>) => {
+    const valueRef = React.useRef(value);
+    valueRef.current = value;
+
+    const [context] = React.useState<Context<T>>(() => ({
+      getValue: () => valueRef.current,
+      listeners: new Set(),
+    }));
+
+    useLayoutEffect(() => {
+      context.listeners.forEach(listener => {
+        listener(value);
+      });
+    }, [value]);
+
+    return <Context.Provider value={context}>{children}</Context.Provider>;
+  };
+
+  return { Context, Provider };
+}
+
+export function useContextSelector<T, O>(holder: ReturnCreateContext<T>, selector: Selector<T, O>) {
+  const eventSelector = useEvent(selector);
+  const context = React.useContext(holder?.Context);
+  const { listeners, getValue } = context || {};
+
+  const [value, setValue] = React.useState(() => eventSelector(context ? getValue() : null));
+
+  React.useLayoutEffect(() => {
+    if (!context) {
+      return;
+    }
+
+    function trigger(nextValue: T) {
+      setValue(prev => {
+        const selectedValue = eventSelector(nextValue);
+        return shallowEqual(prev, selectedValue) ? prev : selectedValue;
+      });
+    }
+
+    listeners.add(trigger);
+
+    return () => {
+      listeners.delete(trigger);
+    };
+  }, [context]);
+
+  return value;
+}

src/context/HoverContext.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import { createContext } from '../ContextSelector';
 
 export interface HoverContextProps {
   startRow: number;
   endRow: number;
   onHover: (start: number, end: number) => void;
 }
 
-const HoverContext = React.createContext<HoverContextProps>({} as any);
+const HoverContext = createContext<HoverContextProps>();
 
 export default HoverContext;

tests/Hover.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { resetWarned } from 'rc-util/lib/warning';
+import toArray from 'rc-util/lib/Children/toArray';
 import Table from '../src';
 import type { TableProps } from '../src/Table';
 
@@ -202,4 +203,37 @@ describe('Table.Hover', () => {
       expect(renderTimes).toBe(0);
     });
   });
+
+  it('perf', () => {
+    const renderTimes = {};
+
+    const TD = (props: any) => {
+      const children = toArray(props.children);
+      const first = children[0] as unknown as string;
+
+      renderTimes[first] = (renderTimes[first] || 0) + 1;
+      return <td {...props} />;
+    };
+
+    const wrapper = mount(
+      createTable({
+        components: {
+          body: {
+            cell: TD,
+          },
+        },
+      }),
+    );
+
+    const firstMountTimes = renderTimes.Jack;
+
+    wrapper.find('tbody td').first().simulate('mouseEnter');
+    expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
+
+    wrapper.find('tbody td').first().simulate('mouseLeave');
+    expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
+
+    expect(firstMountTimes).toEqual(renderTimes.Jack);
+    expect(renderTimes.Lucy).toBeGreaterThan(renderTimes.Jack);
+  });
 });