模态对话框内的可滚动表单（50 多行）比在其自己的页面上呈现的相同表单慢得多

Scrollable form (50+ rows) inside a modal dialog much slower than same form rendered on it's own page

我运行遇到性能问题，想知道是否有解决方法。

我有一个 React.js 应用程序，它允许用户编辑数据库中的行 table:

有时这个 table 有很多（50+）行，所以我开始使用反应虚拟化列表。

无论有无 react-virtualized，当我将表单放在它自己的页面上时，渲染性能（最初或滚动时）都可以：

（在它自己的页面上使用表单滚动性能）

但是如果我将相同的表单放入模态对话框中，它会变得非常慢，例如 https://react.semantic-ui.com/modules/modal#modal-example-modal

（在模态内滚动表单）

我检查了模态后面的组件是否意外呈现，并确认它们没有。我的备份解决方案是将表单放在单独的页面上，但我想用它来更好地理解反应和反应虚拟化的性能，所以希望得到任何指示。

您的第一个屏幕截图是在生产模式下使用 React。第二个，缓慢的显示 React 处于开发模式。（您可以在屏幕截图中看到 react-dom.production.mind.js 和 react-dom.development.js。）这很容易解释您所看到的性能差异。