一、问题描述

在使用 @ant-design/pro-components 的 DragSortTable 组件时当使用者勾选表格行后表格滚动位置会自动重置到第一行，影响使用者体验。

：你勾选一行，表格就跳回顶部了。

二、问题根因分析

DragSortTable 源码分析

DragSortTable 位于 @ant-design/pro-table/es/components/DragSortTable/index.js其主要实现如下：

function DragSortTable { // ... 省略部分代码 return wrapSSR(
/*#__PURE__*/ _jsx(
ProTable。_objectSpread(
_objectSpread,{},{
columns:
=== null || _orProps$columns === void?void : _orProps$columns.map {
// 处理 dragSortKey 列
}),onLoad: wrapOnload。rowKey: rowKey,tableViewRender: function tableViewRender {
return /*#__PURE__*/ _jsx;},dataSource: dataSource,components: components。onDataSourceChange: onDataSourceChange,},),),);}

关键问题点

问题点 ：tableViewRender 每次渲染都是新函数

tableViewRender: function tableViewRender {
return /*#__PURE__*/ _jsx(DndContext。{
children: defaultDom,});怎么说呢，}

• tableViewRender 是在组件函数体内定义的函数。
• 每次父组件重新渲染，这个函数都会被重新创建。
• 虽然函数名相同。但引用不同，React 会认为 props 变化。

打个比方：

问题点 ：DndContext 重新初始化

// useDragSort.js 第 - 行var memoDndContext = useMemo(
function {
return function {
return /*#__PURE__*/ _jsx(DndContext。{
modifiers:,sensors: sensors,collisionDetection: closestCenter,onDragEnd: handleDragEnd,children: contextProps.children,});}，},);说起来，

• memoDndContext 被正确 memo 化。
• 但 handleDragEnd 依赖
• 当 dataSource变化时重新创建。
.
• 所以也会被重新创建。
.
• 随之重启。
. .

举例说明：

You 家里电视机每次有人敲门都会重启一次因为 “开门” 动作被错误地和 “看电视”绑在一起了。

问题点 ：SOrtableContext 的 items 变化

var DraggableContainer = useRefFunction {
return /#PURE/jsx(SortableContext。{
items的观点是，dataSource.map{return index===null||index===void?说起来，void : index.toString;}),strategy:verticalListSortingStrategy。children:
/*#PURE*/jsx),});})，


Sor ta ble Context 的 items 与数据源绑定，一旦引用改变会触发 DOM 重建。

This leads to a full re-render of table.

完整触发链

↓selectedRowKeys 状态变化 ↓父组件重新渲染 ↓ DragSortTable 接收新 props ↓ tableViewRender 函数引用变化 ↓ ProTable 检测到 props 变化 ↓ 内部 useDragSort hook 执行 ↓ handleDragEnd 因 dataSource依赖重新创建 ↓ memoDndContext 创建 ↓ DndContext组件 初始化 ↓ SortableContext 初始化 ↓ 表格 DOM 重建 ↓ 滚动位置重置到顶部 💥

• Simplified cause: Dragging context is nested inside ProTable’s render path.

为什么普通 ProTable 不会有这个问题？怎么说呢，

- 没有额外的 Context 层；其实，勾选只影响 Checkbox 状态； - DOM结构保持稳定； - 浏览器负责滚动状态，不受 React 渲染周期影响； User pain point: 对比普通表格。你仅需点击即可选择，而 DragSortTable 在一次勾选后就把页面卷回最顶端，让人抓狂。

三、方法设计

设计目标

• 至于保持拖拽功能，支持行拖拽排序；其实，
• 说到保持滚动位置。勾选等操作不影响滚动状态；其实，
• 保持原有 API：尽量兼容现有使用方式；
• 性能调整的观点是，避免不必要的全表重渲染。

主要设计思路

DndContext 提高至 ProTable 外部，使拖拽上下文与表格渲染分离。这样即使 rowSelection 改变。也不会触发整个拖拽程序重启，从而避免滚动位置丢失。**

scss ┌─────────────────────────────────────────┐│ DndContext ││ ┌───────────────────────────────────────┐│ │ │ SortableCon text ││ │ ┌───────────────────────┐│ │ │ │ Pro Table ││ │   │   ...

User pain point: 把 Dn d Context 嵌套在内部就像把电线塞进热锅里每一次轻微点击都可能导致整条线路烧毁。