单行数据变更时如何阻止antd Table整表重渲染避免行顺序错乱

• 开发中使用antd Table组件实现列表功能，全量表格数据存储在组件state中
• 当前更新逻辑：点击单行修改按钮提交内容调整后，重新调用全量数据拉取API，用接口返回的最新数据覆盖state触发视图重渲染
• 异常现象：重渲染后表格行顺序错乱，例如修改的第3行数据，渲染后会偏移到其他行位置，不会停留在原位置
• 目标：单行数据变更时避免整表无效重渲染，解决行顺序异常问题

第一步：修复行顺序错乱根因 #

绝大多数行错位问题都是因为Table没有配置稳定唯一的rowKey。antd Table默认使用数组下标作为行的唯一标识，一旦接口返回的数组顺序和本地原有顺序存在差异、或者下标对应的数据内容变更，React虚拟DOM对比时会出现节点复用错误，直接导致行位置偏移。

配置要求：rowKey必须绑定数据中全局唯一、不会随编辑操作变更的字段，比如后端返回的主键id，禁止使用数组索引作为rowKey。
基础配置示例：

<Table
  // 替换为自身数据中对应的唯一主键字段名
  rowKey="id"
  dataSource={tableData}
  columns={columns}
/>

如果后端接口返回的列表本身顺序不稳定，拉取到新数据后可以先按照原有列表的主键顺序做对齐排序，再更新state：

// 接口返回新数据newData后，先对齐原有顺序
const prevIndexMap = new Map(prevTableData.map((item, index) => [item.id, index]))
const alignedData = [...newData].sort((a, b) => {
  return prevIndexMap.get(a.id) - prevIndexMap.get(b.id)
})
setTableData(alignedData)

第二步：实现单行更新、避免整表无效重渲染 #

解决顺序问题后，通过以下方式优化渲染性能：

• 优先采用单行局部更新逻辑：编辑提交后不需要拉取全量列表，让修改接口直接返回更新后的单行数据，本地手动替换state中对应id的数据即可，既减少请求开销，也完全不会打乱原有列表顺序

// 修改接口请求成功，拿到返回的最新单行数据updatedRecord
setTableData(prevList => 
  prevList.map(item => item.id === updatedRecord.id ? updatedRecord : item)
)

• 如果业务要求必须拉取全量数据更新，可通过React.memo缓存行组件，只有当前行绑定的数据发生变化时才会重渲染对应行，不会触发整表重绘

// 缓存行组件
const MemoRow = React.memo((props) => <tr {...props} />)

<Table
  rowKey="id"
  dataSource={tableData}
  columns={columns}
  components={{
    body: {
      row: MemoRow
    }
  }}
/>

• 全量数据更新时做浅对比，不要每次都直接把接口返回的全新引用数组无脑赋值给state，避免无意义的重渲染。

内容的提问来源于stack exchange，提问作者Srikanth Reddy