Ant Design Table编辑行卡顿求助（8000+数据量）

核心原因 #

8000+条数据一次性渲染会生成大量DOM节点，导致React重绘重排成本剧增。即使仅编辑一行，也可能触发整表不必要的重渲染，最终引发卡顿。

针对性解决方案 #

1. 开启表格虚拟滚动

Ant Design Table内置虚拟滚动功能，仅渲染可视区域内的行，大幅减少DOM节点数量。在Table组件中配置scroll.y（固定可视区域高度）即可启用：

<Table
  // 其他属性保持不变
  scroll={{
    x: 2000,
    y: 800, // 设置固定高度，启用虚拟滚动
  }}
/>

若需自适应窗口高度，可通过useEffect结合window.innerHeight动态计算高度。

2. 优化过滤器生成逻辑

当前代码中merkProdukFilters和namaProdukFilters每次组件渲染都会遍历全量数据生成，8000条数据下耗时极高。建议用useMemo缓存结果，避免重复计算：

import { useMemo } from "react";

// 缓存品牌过滤器
const merkProdukFilters = useMemo(() => {
  const uniqueMerk = new Set(data.map(datum => datum.merk));
  return Array.from(uniqueMerk).map(merk => ({ text: merk, value: merk }));
}, [data]);

// 缓存产品名称过滤器
const namaProdukFilters = useMemo(() => {
  const uniqueName = new Set(data.map(datum => datum.name));
  return Array.from(uniqueName).map(name => ({ text: name, value: name }));
}, [data]);

更优方案是从后端获取预聚合的过滤器选项，完全避免前端计算开销。

3. 组件与函数记忆化

• 用React.memo包裹EditableCell组件，阻止不必要的重渲染：

// EditableCell.jsx
import { useEffect, memo } from "react";

const EditableCell = memo(({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  // 原有逻辑保持不变
});

export default EditableCell;

• 用useMemo缓存columns和mergedColumns，防止因引用变化触发整表重绘：

const columns = useMemo(() => [
  // 原有列配置内容
], [merkProdukFilters, namaProdukFilters, getSupplier]);

const mergedColumns = useMemo(() => columns.map((col) => {
  if (!col.editable) return col;
  return {
    ...col,
    onCell: (record) => ({
      record,
      inputType: "text",
      dataIndex: col.dataIndex,
      title: col.title,
      editing: isEditing(record),
    }),
  };
}), [columns, editingKey]);

4. 优化State更新逻辑

当前save函数中通过const newData = [...data]创建全量新数组，会触发整表重渲染。使用immer库可以精准修改指定行，减少重渲染范围：

import { produce } from "immer";

const save = async (key) => {
  try {
    const row = await form.validateFields();
    // 仅修改目标行，而非生成全量新数组
    setData(produce(draft => {
      const index = draft.findIndex(item => item.key === key);
      if (index > -1) {
        draft[index] = { ...draft[index], ...formatUndefined(row) };
      }
    }));
    handleSaveChanges({ ...data.find(item => item.key === key), ...formatUndefined(row) });
    setEditingKey("");
  } catch (errInfo) {
    console.log("Validate Failed:", errInfo);
  }
};

5. 改用弹窗编辑替代行内编辑

行内编辑需要修改表格行状态，极易触发整表重绘。改用弹窗编辑仅渲染弹窗内的表单，完全不影响表格整体性能：

// 新增弹窗状态
const [editModalVisible, setEditModalVisible] = useState(false);
const [currentEditRow, setCurrentEditRow] = useState(null);

// 修改操作列渲染逻辑
{
  title: "",
  dataIndex: "operation",
  fixed: "right",
  width: 70,
  render: (_, record) => (
    <Typography.Link onClick={() => {
      setCurrentEditRow(record);
      form.setFieldsValue(record);
      setEditModalVisible(true);
    }}>
      Edit
    </Typography.Link>
  ),
}

// 新增编辑弹窗
<Modal
  title="编辑产品"
  visible={editModalVisible}
  onCancel={() => setEditModalVisible(false)}
  onOk={async () => {
    try {
      const row = await form.validateFields();
      setData(produce(draft => {
        const index = draft.findIndex(item => item.key === currentEditRow.key);
        if (index > -1) {
          draft[index] = { ...draft[index], ...formatUndefined(row) };
        }
      }));
      handleSaveChanges({ ...currentEditRow, ...formatUndefined(row) });
      setEditModalVisible(false);
    } catch (errInfo) {
      console.log("Validate Failed:", errInfo);
    }
  }}
>
  <Form form={form} layout="vertical">
    <Form.Item name="merk" label="Merk Produk">
      <Input />
    </Form.Item>
    <Form.Item name="name" label="Nama Produk">
      <Input />
    </Form.Item>
    {/* 其他可编辑字段按需添加 */}
  </Form>
</Modal>

总结 #

优先启用虚拟滚动（效果最显著），配合记忆化优化和精准State更新，基本可解决大数据量下的卡顿问题。若仍有性能瓶颈，弹窗编辑是更彻底的替代方案。

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