🐛[BUG] EditableProTable 配合Form.Item 有严重的性能问题。15行数据以上就有明显卡顿

[PudgeJ]

🐛 bug 描述

EditableProTable 配合Form.Item 有严重的性能问题。15行数据以上就有明显卡顿

我认为主要的问题在于，外层的Form 控制了table，所以每次 修改数据框都会导致 re-render。

📷 复现步骤

[](https://procomponents.ant.design/components/editable-table#%E4%B8%8E-formitem-%E9%85%8D%E5%90%88)

这个是官方示例代码。 配合Form.Item的用法。

只需要把defaultData 修改成新

const defaultData: DataSourceType[] = new Array(30).fill(1).map((_, index) => { return { id: (Date.now() + index).toString(), title: '活动名称二', decs: '这个活动真好玩', state: 'closed', created_at: 1590481162000, update_at: 1590481162000, }; });

🏞 期望结果

editable-table 搭配Form.item性能明显比 直接使用 editable-table （onChange, value） 的形式性能降低了非常多。

© 版本信息

• ProComponents 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[dosubot[bot]]

Hi @PudgeJ! I'm Dosu and I’m helping the pro-components team.

你反馈的 EditableProTable 配合 Form.Item 性能问题，确实是组件架构上的已知限制：当表格数据发生变更时，所有可编辑行的 renderFormItem 都会被重新执行，导致每次编辑都会触发全表格的 re-render，尤其在行数较多（如 15 行以上）时非常卡顿。即使用 React.memo 也无法避免，因为 onChange 等 props 每次都是新引用，所有行都会重新渲染，这是当前实现下无法彻底解决的问题，适合行数较少的场景详细分析。

根本原因在于 EditableProTable 被包裹在 Form.Item 内部时，Form.Item 的 shouldUpdate 逻辑会对整个表格的数据做 JSON 比较，只要有一行数据变化，整个表格都会重新渲染源码细节。

官方推荐的最佳实践是：不要用 Form.Item 包裹 EditableProTable，而是直接用 value/onChange 受控模式管理表格数据，这样性能会好很多，避免 Form 驱动的全量重渲染官方文档说明。

目前代码层面没有更细粒度的优化（如虚拟化或行级 memo），如需大数据量编辑表格，建议用受控模式或自行实现虚拟滚动等方案。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[rubbishmaker]

开虚拟列表功能，减少行的渲染能解决问题吗