ant-design / ant-design/pro-components

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

Open
#9,271 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.