再レンダリングされているReactコンポーネントを追跡する方法はありますか?ReactJS:再レンダリングプロセスをどのように監視できますか?
たとえば、私はAPIコールを作成しています。返信すると、いくつかの親コンポーネントの状態が変更されるため、すべての子コンポーネントも再描画されています。
どのような親コンポーネントが再レンダリングプロセスを開始し、どの子コンポーネントが結果としてレンダリングされるのか(各コンポーネントが再レンダリングされる回数)を監視するにはどうすればよいですか?
私は、すべてのコンポーネントに何らかの種類のconsole.logパターンを注入してブラウザコンソールを監視できることを知っていますが、私はより洗練されたソリューションを探していました。
あなたは[デベロッパーツールに反応](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)ブラウザプラグインを見たことがありますか?コンポーネントの変更を直接見ることができます。 –
私はReact devtoolsを持っていますが、Trace React Updates機能に気付かなかったのです!それは私が探していたものの視覚的に同等です!唯一の問題は、何が更新されているのか一般的な考えを得ようとしているときにはうまくいくということですが、誤ってコンポーネントが2回更新されているかどうかは分かりません。 – mpoureki
devtoolsの視覚的な表示は、要素の連続レンダリング間の時間幅がどれくらい小さいかによって色が変わることが判明しました。タイムスパンが小さいほど、色が「熱く」なります。それでも、視覚的な表示だけではなく、ログをはるかに使いやすくすることができます。 – mpoureki