ant-design / ant-design/pro-components
🐛[BUG] EditableProTable 配合Form.Item 有严重的性能问题。15行数据以上就有明显卡顿
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 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]
### 🚑 其他信息
Contributor guide
Research direction
Start with the official EditableProTable example linked in the issue and change defaultData to generate 30 rows. Compare the Form.Item integration with the direct onChange/value form while observing rerenders and responsiveness. Done means the Form.Item version no longer shows the reported performance gap for larger datasets, with the behavior covered by an appropriate regression check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100