🐛[BUG] EditableProTable有严重的性能问题 且报错

[PudgeJ]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

使用官方demo，实时编辑行，

当输入框快速输入文本的时候，有明显 延迟感，而且甚至会卡。

并且控制台会报错。valid prop autoFocus supplied to React.Fragment. React.Fragment can only have key and children props. i. @ index.js:27 Invalid prop onKeyDown supplied to React.Fragment. React.Fragment can only have key and children props.

📷 复现步骤

使用官方demo，实时编辑行，然后将react版本和pro-components的版本改成

"@ant-design/pro-components": "2.8.10",
"antd": "5.20.0",
"react": "19.1.0",
"react-dom": "19.1.0"

🏞 期望结果

解决卡顿问题

💻 复现代码

demo

© 版本信息

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

🚑 其他信息

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#3354][🐛[BUG]EditableProTable分页新增行问题][60%]

[dosubot[bot]]

你遇到的 EditableProTable 卡顿和控制台报错（autoFocus、onKeyDown 传递给了 React.Fragment）问题，根本原因是组件内部在渲染可编辑单元格时，把这些只适用于输入组件的 props 传递给了 React.Fragment，而 React 19+ 会直接报错并影响性能。

这个问题出现在 EditableProTable 的底层实现（如 PureProField），它会把输入相关的 props（如 autoFocus、onKeyDown）直接 spread 到 render/formItemRender 返回的节点上。如果这些节点是 Fragment，就会报错并导致渲染性能下降。详见相关源码分析。

临时解决办法：

• 避免自定义 render/formItemRender 返回 Fragment（即不要用 <>...</> 或 <React.Fragment> 包裹输入组件），直接返回 Input、div 等实际 DOM 元素。
• 如果是官方 demo 也报错，说明内部实现需要修复。可以尝试升级到最新的 @ant-design/pro-components 和 antd 版本，看看是否已修复。
• 性能卡顿还可能和频繁的状态更新、context 传递有关，建议关注表格的受控/非受控用法，减少不必要的 re-render。

参考 ant-design 官方的 editable table demo，可以看到它们不会把 autoFocus、onKeyDown 等 props 传递给 Fragment，只会传递给 Input 或 div 这类实际元素（源码示例）。

核心建议：
如需自定义渲染，render/formItemRender 返回的节点不要用 Fragment 包裹，确保 props 只传递给实际的输入组件。如果依赖官方实现，建议关注后续 pro-components 的修复或升级到新版本。

To reply, just mention @dosu.

---

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

[PudgeJ]

"@ant-design/pro-components": "2.8.10", "antd": "5.20.0", "react": "19.1.0", "react-dom": "19.1.0" 均是最新版本，我认为是该组件对 react 19.1.0支持不好，有报错并且性能有问题。请官方同学解决。

@dosu

[dosubot[bot]]

你反馈的 EditableProTable 在 React 19.1.0 下报错和卡顿，确实是已知的兼容性问题。根本原因是组件内部（PureProField）会把 autoFocus、onKeyDown 等输入相关 props 直接传递给 render/formItemRender 返回的节点，如果返回的是 React.Fragment，React 19+ 会直接报错并导致性能下降。这个问题目前在 2.8.10 版本和主干代码中都没有修复或兼容处理，属于 pro-components 对 React 19.x 的适配缺口源码分析。

antd v5 虽然大部分功能兼容 React 19，但官方也说明有部分问题需要特殊配置才能适配，相关兼容方案会在 antd v6 移除官方说明。

目前没有官方 workaround。临时规避方式：自定义 render/formItemRender 时不要返回 Fragment，只返回实际 DOM 元素（如 Input、div）。但官方实现本身也需要修复，建议关注后续 pro-components 的兼容性更新。

性能方面，EditableProTable 在大数据量和频繁输入场景下本身就有 rerender 过多的问题，社区有用虚拟化 TableEditableProTable 或 React.memo/useMemo 优化的建议，但根本的 Fragment 兼容问题仍需官方修复相关讨论。

目前建议：如需在生产环境用 React 19，建议暂时回退到 React 18 或等待 pro-components 官方适配。

To reply, just mention @dosu.

---

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