Reactアプリでレンダリングを追跡していますか？

Question

まだプレーンコンポーネントを使用している間にアプリ内のレンダリングを追跡する方法はありますか？私は、パフォーマンスの監視と、レンダリングが更新中に正しい球場にいることを確認するためにテストに使用したいと思います。

Answer 1

開発モードでは、サポートされているブラウザのパフォーマンスツールを使用して、コンポーネントのマウント、更新、およびマウント解除を視覚化できます。たとえば、次のようにChromeでこれを行うには

：？

• はしてクエリ文字列（例えば、 http://localhost:3000/?react_perf）でreact_perfアプリケーションをロードします。

• Chrome DevToolsの[パフォーマンス]タブを開き、[レコード]を押します。

• プロファイルするアクションを実行します。 20秒を超えて記録しないでください.秒またはChromeがハングすることがあります。

• 録音を停止します。

• リアクションイベントは、ユーザータイミングラベルの下にグループ化されます。

部品は生産の 速くレンダリングされますので、数字は相対的であることに注意してください。それでも、無関係のUI が間違って更新された場合や、UI更新の頻度と頻度が の場合に役立ちます。