ProForm嵌套EditableProTable出现性能卡顿问题寻求解决方案

当在ProForm中嵌入EditableProTable时，仅60行数据就出现编辑卡顿，但单独使用EditableProTable或ProFormList处理同量数据时性能正常，核心原因是ProForm的全局状态更新会触发整个EditableProTable的全量重渲染，而ProFormList内部做了局部更新优化，单独使用EditableProTable时是维护局部状态，避免了全局重渲染的开销。

解决方案 #

1. 解耦表格状态与ProForm全局状态 #

单独维护EditableProTable的数据状态，避免表单全局更新触发表格全量重渲染，提交表单时再将表格数据合并到表单值中：

import { useState } from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-form';
import { EditableProTable } from '@ant-design/pro-components';

// 初始化表格数据
const initialData = Array.from({ length: 60 }).map((_, i) => ({
  id: i,
  name: `行${i}`,
  value: `值${i}`,
}));

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    editable: true,
  },
  {
    title: '值',
    dataIndex: 'value',
    editable: true,
  },
];

const App = () => {
  // 局部维护表格数据
  const [tableData, setTableData] = useState(initialData);

  const handleSubmit = (formValues) => {
    // 提交时合并表格数据到表单结果
    const submitValues = {
      ...formValues,
      tableData,
    };
    console.log('提交数据:', submitValues);
    // 执行提交逻辑
  };

  return (
    <ProForm onFinish={handleSubmit}>
      <ProFormText name="formName" label="表单名称" />
      <EditableProTable
        value={tableData}
        onChange={setTableData}
        columns={columns}
        rowKey="id"
      />
    </ProForm>
  );
};

export default App;

2. 开启虚拟滚动减少渲染元素 #

给EditableProTable设置scroll={{ y: 固定高度 }}，启用虚拟滚动特性，表格只会渲染可视区域内的行，大幅减少DOM元素数量和重渲染开销：

<EditableProTable
  value={tableData}
  onChange={setTableData}
  columns={columns}
  rowKey="id"
  scroll={{ y: 600 }} // 设置可视区域高度
/>

3. 优化列渲染组件的重渲染 #

将表格中可编辑单元格的渲染逻辑抽离为独立组件，并用React.memo包裹，避免无关更新触发单元格重渲染：

import { memo } from 'react';
import { ProFormText } from '@ant-design/pro-form';

// 用memo包裹，仅在props变化时重渲染
const EditableTextCell = memo(({ value, onChange, record }) => {
  return (
    <ProFormText
      value={value}
      onChange={(e) => onChange(record.id, 'value', e.target.value)}
    />
  );
});

// 在列配置中使用
const columns = [
  {
    title: '值',
    dataIndex: 'value',
    render: (text, record) => (
      <EditableTextCell
        value={text}
        onChange={(id, key, val) => {
          setTableData(prev => prev.map(item => 
            item.id === id ? { ...item, [key]: val } : item
          ));
        }}
        record={record}
      />
    ),
  },
];

4. 用ProFormField封装表格，手动控制字段更新 #

通过ProFormField自定义表单字段，手动关联表格数据与表单字段，减少全局表单状态对表格的影响：

<ProFormField
  name="tableData"
  initialValue={initialData}
  render={({ value, onChange }) => (
    <EditableProTable
      value={value}
      onChange={onChange}
      columns={columns}
      rowKey="id"
      scroll={{ y: 600 }}
    />
  )}
/>

总结 #

优先尝试状态解耦+虚拟滚动的组合方案，这两个措施能快速解决大部分场景下的性能卡顿问题；如果仍有优化空间，再结合单元格组件的memo优化进一步减少重渲染。

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