2016-11-08 16 views
3

再レンダリングされているReactコンポーネントを追跡する方法はありますか?ReactJS:再レンダリングプロセスをどのように監視できますか?

たとえば、私はAPIコールを作成しています。返信すると、いくつかの親コンポーネントの状態が変更されるため、すべての子コンポーネントも再描画されています。

どのような親コンポーネントが再レンダリングプロセスを開始し、どの子コンポーネントが結果としてレンダリングされるのか(各コンポーネントが再レンダリングされる回数)を監視するにはどうすればよいですか?

私は、すべてのコンポーネントに何らかの種類のconsole.logパターンを注入してブラウザコンソールを監視できることを知っていますが、私はより洗練されたソリューションを探していました。

+1

あなたは[デベロッパーツールに反応](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)ブラウザプラグインを見たことがありますか?コンポーネントの変更を直接見ることができます。 –

+0

私はReact devtoolsを持っていますが、Trace React Updates機能に気付かなかったのです!それは私が探していたものの視覚的に同等です!唯一の問題は、何が更新されているのか一般的な考えを得ようとしているときにはうまくいくということですが、誤ってコンポーネントが2回更新されているかどうかは分かりません。 – mpoureki

+0

devtoolsの視覚的な表示は、要素の連続レンダリング間の時間幅がどれくらい小さいかによって色が変わることが判明しました。タイムスパンが小さいほど、色が「熱く」なります。それでも、視覚的な表示だけではなく、ログをはるかに使いやすくすることができます。 – mpoureki

答えて

0

新しい状態またはプロパティを、各レンダリングの直前に呼び出されるcomponentWillUpdate()ライフサイクルメソッドでロギングすることができます(最初のものを除く)。

https://facebook.github.io/react/docs/react-component.html#componentwillupdate

+0

これは私の初期のアプローチでしたが、使用しているすべてのコンポーネントでcomponentShouldUpdateをオーバーライドする必要がありました。私はよりクリーンなソリューションを望んでいました。 – mpoureki

+0

あなたはそうです。別のユーザが指摘したように、shouldComponentUpdate関数が本当に必要かどうかを区別するロジックで定義されていない限り、コンポーネントが新しい状態または小道具を受け取るたびにReact用語で再レンダリング(render関数を呼び出す)がトリガーされますレンダリングする。これを行う必要がある場合は、既存のコンポーネントを変更して、代わりに高次コンポーネントを使用してはいけません。 –

関連する問題