perf(react): 防止不必要的重新渲染

packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx

@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import { DataCell, S2Event, S2_PREFIX_CLS } from '@antv/s2';
+import type { Event as CanvasEvent } from '@antv/g-canvas';
 import type { ScrollOffset } from '@antv/s2';
+import { DataCell, S2Event, S2_PREFIX_CLS } from '@antv/s2';
 import { isEqual, pick } from 'lodash';
-import type { Event as CanvasEvent } from '@antv/g-canvas';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useS2Event } from '../../../../hooks';
 import { useSpreadSheetRef } from '../../../../utils/SpreadSheetContext';
-import './drag-copy-point.less';
 import { DragCopyMask } from './drag-copy-mask';
+import './drag-copy-point.less';
 
 export type DragCopyProps = {
   onChange?: (val) => void;
 };
 
-export function DragCopyPoint(props: DragCopyProps) {
+export const DragCopyPoint = memo((props: DragCopyProps) => {
   const spreadsheet = useSpreadSheetRef();
 
   const [scroll, setScroll] = useState<
@@ -69,7 +69,7 @@
     }
   };
 
-  const fixPostiton = (event: CanvasEvent) => {
+  const fixPosition = (event: CanvasEvent) => {
     const eventCell = event.target.cfg.parent;
     const isEventCellSelected =
       spreadsheet.interaction.isSelectedCell(eventCell);
@@ -123,17 +123,19 @@
     }
   }, [scroll, cell]);
 
-  /** 多选时隐藏拖拽点 */
-  const batchSelected = () => {
+  /**
+   * 多选时隐藏拖拽点
+   */
+  const batchSelected = useCallback(() => {
     setCell(undefined);
-  };
+  }, []);
 
   useS2Event(S2Event.COL_CELL_CLICK, batchSelected, spreadsheet);
   useS2Event(S2Event.ROW_CELL_CLICK, batchSelected, spreadsheet);
   useS2Event(S2Event.CORNER_CELL_CLICK, batchSelected, spreadsheet);
   useS2Event(S2Event.DATA_CELL_BRUSH_SELECTION, batchSelected, spreadsheet);
 
-  useS2Event(S2Event.DATA_CELL_CLICK, fixPostiton, spreadsheet);
+  useS2Event(S2Event.DATA_CELL_CLICK, fixPosition, spreadsheet);
 
   return (
     <div
@@ -149,4 +151,4 @@
       <DragCopyMask onCopyFinished={batchSelected} />
     </div>
   );
-}
+});

packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx

@@ -3,6 +3,7 @@
 import { Input } from 'antd';
 import { merge, pick } from 'lodash';
 import React, {
+  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -38,7 +39,7 @@
 ) {
   const { params, resolver } = props;
   const spreadsheet = useSpreadSheetRef();
   const { event, onChange, onDataCellEditEnd, CustomComponent } = params;
   const cell: BaseCell<ViewMeta> = event.target.cfg.parent;
 
   const { left, top, width, height } = useMemo(() => {
@@ -96,12 +97,12 @@
     spreadsheet.render(true);
 
     onDataCellEditEnd?.(
       merge(cell.getMeta(), {
         fieldValue: inputVal,
         data: {
           [valueField]: inputVal,
         },
       }),
     );
 
     if (onChange) {
@@ -172,27 +173,25 @@
   );
 }
 
-function EditCell({
-  onChange,
-  onDataCellEditEnd,
-  CustomComponent,
-}: onChangeProps) {
-  const spreadsheet = useSpreadSheetRef();
-
-  const cb = useCallback(
-    (e: CanvasEvent) => {
-      invokeComponent(
-        EditCellComponent,
-        { event: e, onChange, onDataCellEditEnd, CustomComponent },
-        spreadsheet,
-      );
-    },
-    [spreadsheet],
-  );
+const EditCell = memo(
+  ({ onChange, onDataCellEditEnd, CustomComponent }: onChangeProps) => {
+    const spreadsheet = useSpreadSheetRef();
+
+    const cb = useCallback(
+      (e: CanvasEvent) => {
+        invokeComponent(
+          EditCellComponent,
+          { event: e, onChange, onDataCellEditEnd, CustomComponent },
+          spreadsheet,
+        );
+      },
+      [spreadsheet],
+    );
 
-  useS2Event(S2Event.DATA_CELL_DOUBLE_CLICK, cb, spreadsheet);
+    useS2Event(S2Event.DATA_CELL_DOUBLE_CLICK, cb, spreadsheet);
 
-  return null;
-}
+    return null;
+  },
+);
 
 export { EditCell };

packages/s2-react/src/components/sheets/editable-sheet/index.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { BaseSheet } from '../base-sheet';
 import type { SheetComponentsProps } from '../interface';
-import { EditCell } from './edit-cell';
 import { DragCopyPoint } from './drag-copy';
+import { EditCell } from './edit-cell';
 
 export const EditableSheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
+    const onChange = useCallback(() => {}, []);
     return (
       <BaseSheet {...props} sheetType={'table'}>
         <EditCell
-          onChange={() => {}}
+          onChange={onChange}
           onDataCellEditEnd={props.onDataCellEditEnd}
         />
         <DragCopyPoint />
       </BaseSheet>