Reactjsアプリが開いているChrome開発ツールで遅くなる

Question

React、Redux、React Routerでかなり大きなWebアプリケーションが作成されています。 Chromeでdevのツールを開くまではうまく動作し、100回で大幅に減速します。私はChromeでプロファイルアプリを試してみましたが、Chromeを使用して再度プロファイリングを開始すると、開発ツールを閉じたままですぐに作業が開始され、すべて正常です。

SafariとOperaもチェックされています。開発ツールはwebappの処理速度を落とします。なぜReact/Chromeがパフォーマンスに悪影響を及ぼすのですか？私がReactを誤用する、またはReact + Chromeのこの一般的な問題ですか？回避策はありますか？

Answer 1

私が今日気づいたことの1つは、React Tools拡張機能がReactアプリケーションのパフォーマンスに大きな影響を与える場合があることです。拡張の目的はReactコンポーネントのリアルタイム表示を提供することであるため、ページの変更に応じて表現を更新しようとします。重い突然変異では遅延が追加されます。

私の場合、列ヘッダーをクリックするとソートできる〜650行のテーブルがあります。開発ツールを開いてReactタブに切り替えると、タブ全体（ページと開発ツールの両方のペイン）は余分なクリックに対して反応しなくなりますテーブルソート後3-4秒。