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

Question

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

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

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

无论是否有反应虚拟化，当我将表单放在自己的页面上时，渲染性能（最初或滚动时）都可以：

（在其自己的页面上滚动表格形式）

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

（在模态内滚动表单）

我已经检查了模态背后的组件是否意外渲染，并确认它们不是。 我的备份解决方案是将表单放在一个单独的页面上，但我想用它来更好地理解反应和反应 - 虚拟化性能，所以会很感激任何指针。

Answer 1

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

点击此处了解详情：https://reactjs.org/docs/optimizing-performance.html#use-the-production-build