🐛 明细表设置了 themeCfg 之后，操作单元格会出现卡顿问题

duganlx commented 1 month ago

🏷 Version

Package	Version
@antv/s2	2.0.0-next.25
@antv/s2-react	2.0.0-next.24
@antv/s2-vue

Sheet Type

[ ] PivotSheet
[x] TableSheet
[ ] GridAnalysisSheet
[ ] StrategySheet
[ ] EditableSheet

🖋 Description

在使用明细表的时候，我对组件 SheetComponent 设置了 themeCfg，并绑定 onDataCellClick 和 onDataCellSelectMove 事件，在绑定的这两个单元格事件中，我会获取到选中的 rowIndex 和 colIndex 并保存到 useState 中，并在 useEffect 监听这两个变量，并进行输出到页面上。我发现在操作了几次之后，操作的流畅度变得很差。另外，我如果设置了冻结行之后，操作多次之后，冻结行的下边框会变得越来越粗，如下图所示。个人感觉是页面重新渲染时，某些变量可能没有清理，导致一直在累加导致的。

⌨️ Code Snapshots

s2Options 和 SheetComponent 使用代码如下。

s2Options = {
  width: 600,
  height: 400,
  seriesNumber: { enable: true, text: "序号" },
  frozen: {
    rowCount: 1,
  },
  style: {
    rowCell: {
      heightByField: {
        "0": 100,
      },
      height: 24,
    },
  },
}

<SheetComponent
  sheetType="table"
  dataCfg={s2DataConfig}
  options={s2Options}
  themeCfg={{
    theme: {
      dataCell: {
        cell: {
          interactionState: {
            selected: {
              backgroundColor: "#ffe58f",
              borderWidth: 2,
              borderColor: "red",
            },
          },
        },
      },
    },
  }}
  onDataCellClick={(cell) => {
    // console.log(cell, 'cell');
    const { viewMeta } = cell;
    const { rowIndex, colIndex } = viewMeta;

    unstable_batchedUpdates(() => {
      setCheckedRowIndex(rowIndex);
      setCheckedColIndex(colIndex);
    });
  }}
  onDataCellSelectMove={(metaList) => {
    // console.log(metaList, 'metaList/onDataCellSelectMove');
    if (metaList.length == 0) return;

    const cell = metaList[0] as any;

    unstable_batchedUpdates(() => {
      setCheckedRowIndex(cell["rowIndex"]);
      setCheckedColIndex(cell["colIndex"]);
    });
  }}
/>

🔗 Reproduce Link

https://codesandbox.io/p/sandbox/s2-themecfg-bug-xtfjdl

🤔 Steps to Reproduce

点击任何一个 s2 表格中的单元格
使用键盘的上下左右键随意点击数次
观察“选中单元格”的响应速度，以及开头冻结行的底部边线的大小和阴影

😊 Expected Behavior

预期的效果就是无论如何点击和改变选中的单元格，响应速度都很丝滑。如果设置了开头行冻结，那么冻结行底部边线也不会出现样式的改变。

😅 Current Behavior

目前，开始点击选中某个单元格之后，用键盘上下左右随意键入几次，开头冻结行底部边线样式异常（变粗、阴影变大），并且响应速度变慢

💻 System information

Environment	Info
System	window 10
Browser	chrome v127.0.6533.72

github-actions[bot] commented 3 days ago

你好 @duganlx，很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @duganlx, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

lijinke666 commented 3 days ago

复现了下, 确实有点奇怪, 还没定位到原因, 近期再看下

antvis / S2