Reactjs 应用程序因打开 Chrome 开发工具而变慢

Question

我有相当大的 webapp，是用 React、Redux 和 React Router 构建的。它工作正常，直到我在 Chrome 中打开开发工具并且它明显减慢了 100 倍。我已经尝试在 Chrome 中分析应用程序，但是当我使用 Chrome 再次开始分析时，它开始工作的速度与关闭开发工具时一样快，一切正常。

还检查了 Safari 和 Opera - 它们的开发工具也会降低 webapp 的速度。为什么 React/Chrome 会如此严重地影响性能？这是否意味着我滥用了 React，或者这是 React+Chrome 的常见问题？有什么解决方法吗？

Answer 1

我今天注意到的一件事是，React Tools 扩展在某些情况下会显着影响 React 应用程序的性能。由于扩展的目的是提供您的 React 组件的实时视图，它会尝试在您的页面更改时更新其表示，并且在一些重大突变时这会增加延迟。

在我的例子中，我有一个 table 约 650 行，可以通过单击列 headers 进行排序。在没有打开开发工具窗格的情况下，一切都非常顺利（页面在一秒钟内更新），但是一旦我打开开发工具并切换到 'React' 选项卡，整个选项卡（我的页面和开发工具窗格）都对点击没有反应table 排序后额外 3-4 秒。