React: Devtools V4：ハイライトアップデートはどこにありますか？

ここで同じ問題。 ハイライトの更新はなくなりました。
更新を追跡するために、今プロファイラーを使用する必要があるかどうか疑問に思っていましたか？

https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex1r9nb/

正直な答えは、それを実装する時間があまりなく、他のすべての機能のリリースをブロックするほど重要であるとは考えていなかったということです。

ただし、それを追加し直すかどうかわからない理由はさらに深くなります。 これは、再レンダリング自体が悪いという誤った考えの原因になります（安価な場合はそうではありません）。 そのため、人々は無駄なことを最適化し、実際のパフォーマンスの問題を見逃すことに時間を費やしています。

新しいDevToolsには、コードの実際のパフォーマンスの問題を見つけるのに役立つプロファイラーが含まれています。 余分なレンダリングを見つけるための超軽量の方法が必要であることは理解していますが、それを追加するかもしれませんが、最初にどのように機能するかについてもっと考える必要があります。

インラインコメントを追加するために編集

いくつかの関連する以前の議論https://github.com/bvaughn/react-devtools-experimental/issues/244

ハイライトアップデートは、パフォーマンスの問題を修正するのにそれほど役立ちませんでしたが（新しいプロファイラーの方がはるかに優れています）、驚くべきレンダリングを発見するのに役立ちました。 特に、1つの変更によってアプリの他の部分で再レンダリングが発生する可能性があるコンテキストで作業する場合は、数え切れないほどの時間を節約できました。 プロファイラーで作業するときは、ツリーの一部だけに焦点を合わせる傾向があるため、回帰を見逃しがちです。

間違ったアイデアを与えることについての@gaearonの懸念を理解しているので、どうでしょうか。

1.レンダリング時間に基づいてアウトラインの色を選択します

安価なレンダリングは緑、高価なレンダリングは黄色または赤である必要があります。 または、プロファイラーで使用されているのとまったく同じ色を使用します。

2.アウトラインのフェード速度を変える

アウトラインフェードアニメーションは、レンダリング期間に関連している必要があります。 速いレンダリングはすぐにフェードし、遅いレンダリングはゆっくりフェードするはずです。

3.塗り直された領域を区別する

ChromeのPaint Flashing Highlight Updatesを使用することがありました。 これにより、再描画につながるレンダリングが、DOM効果のないレンダリングとは異なる方法で強調表示されるようになりました。 DevToolsにも同様の機能が組み込まれているはずだと思います。

• 再描画のない高価なレンダリングは、パフォーマンス最適化の主なターゲットになるはずです。
• 再描画するレンダリングは、明らかに実行する必要のある作業を行っています。
• 再描画が行われない高速レンダリングは無視してもかまいません。

たぶん、上記の最初のものだけを点滅させる設定があるかもしれません（いくつかの設定可能なしきい値があります）。

「安い」または「速い」レンダリングを識別することは、次のような要因のために、見た目ほど簡単ではありません。

• 開発ビルドは、本番ビルドよりもはるかに低速です。
• 開発者のラップトップは、一般的にエンドユーザーのラップトップよりもはるかに高速です。

プロファイラーの良いところは、速度を相対的なものとして報告し、特定のセッションでアプリケーションの最も遅い部分に集中できることです。 （最も遅い部分がいつ十分に速いかを決めることができます。）しかし、これは振り返ってみてのみ行うことができます。

また、コミットの静的スナップショット、および変更された小道具/状態を提供し、特定のコンポーネントがレンダリングされた頻度（予想よりも多かったか）だけでなく、具体的には再レンダリングされた理由なども確認できます。それで再レンダリングされました。

プロファイラーの一部として、ある種の更新フラッシュメカニズムをDevToolsに追加することを検討する可能性は十分にあると思います。 たぶん、プロファイリングがアクティブなときにのみ点滅しますか？ プロファイリングが停止した後、プロファイラーで新しいコミットを選択すると、再レンダリングされたすべてのコンポーネントがフラッシュされるのではないでしょうか。 （何かを見逃した場合に「再生」できるので、私はそのアイデアが好きです。）少し実験して、何が最も効果的かを確認する必要があります。

この機能を頻繁に使用して、レンダリングする必要のあるコンポーネントのみがレンダリングされていることを確認しました。 同じコンポーネントを異なるIDで何度もレンダリングするアプリがあり、すべてではなく、再レンダリングする必要があるコンポーネントのみがレンダリングされるようにしたいのです。 新しいプロファイラーでこれを確認する方法がわかりません。

新しいプロファイラーでこれを確認する方法がわかりません

何を試しましたか？ プロファイラーは、1人の子供が再レンダリングしているか多数であるかを明確に示す必要があります。

「ハイライトアップデート」を頻繁に使用していました。 私が最もよく使用したのは、dev-toolsの機能でした。 更新頻度ではなく、更新内容を確認するだけです。 もちろん、プロファイラーを使用してこれを行うことはできますが、それは迅速な視覚的表示よりもかなり面倒です。

私にとって、「ハイライトアップデート」は「キラー機能」でした...

私たちはあなたの言うことを聞きます:-)「私はこれを使用しました」と言っているだけのコメントがこのスレッドで大いに役立つとは思わない。 この機能を使用している人がいることはわかっており、この機能を元に戻す正しい方法は何かを考えています。 フィードバックをありがとう！

このオプションは、再レンダリングの問題を即座に示すために、私の日常の作業プロセスに不可欠なコンポーネントでした。 ですから、この素晴らしい機能をすぐに復活させることができれば、私は本当にうれしいです。

再レンダリングの迅速な高レベルのビューを可能にするこの機能のいくつかのバージョンを復活させると+1します（コンテキストを更新するときのように完全に問題のない再レンダリングの場合でも）。

持ち帰りで+1

ですから、この素晴らしい機能をすぐに復活させることができれば、私は本当にうれしいです。

上で要求されたように：

「これを使った」というコメントだけでは、あまり役に立たないと思います。

これをより明確に言い換えると、次のようになります。

聞こえます！

このリポジトリを購読している人はたくさんいます。 数時間ごとに同じコメントでスパムを送信したくありません。 さらに、GitHub通知を個人的に使用しています。 このスレッドが毎日「+1」でぶつかった場合、ノイズを減らすために、最終的には購読を解除する必要があります。 これはおそらくあなたの意図の反対です。

コメントする前に、以前に言われたことのないものを追加していることを確認してください。 書きたいものと同様のコメントが表示された場合は、代わりに👍リアクションを追加してください。

理解に感謝。
フィードバックをお待ちしておりますが、タスクの優先順位付けには👍で十分です。

以前に言われなかった何かを追加していること。

以前のバージョンの拡張機能をインストールする方法はありますか？ 実際、アップデートは私が以前使用していたフローを壊しました。 残念ながら、Chrome拡張機能マーケットプレイスでは、「npm」のような以前のバージョンをインストールすることはできません。 コンパイルされた拡張機能とのリンクはありますか？ ありがとうございました。
_（スタンドアロンバージョンをインストールしようとしましたが、v3リポジトリからのこのリンクが壊れています。Crome拡張機能へのリンクは最新バージョンにつながります）_

新しいDevToolsには、コードの実際のパフォーマンスの問題を見つけるのに役立つプロファイラーが含まれています。

そしてここに答えがあります、なぜ新しい拡張機能が私の流れを壊したのですか？ プロファイラーでは、ボタンを押してプロファイリングを開始してから終了することをお勧めしますが、それは瞬時ではありません。 アップデートハイライターを使用すると、余分な動きなしですべてを見ることができます。 また、実際の更新と実際にトリガーされたものを非常に直感的な方法で示します。

これは、Chrome DevTools独自のパフォーマンスモニターを思い出させます。これもライブアップデートでしたが、いつかプレストゥレコードに移行されました。 その動きはおそらく複雑さとパフォーマンスへの影響のために理にかなっていますが、ポイントはそれが巨大な摩擦を追加するということです（ @Carduelisが指摘するように、スタート/ストップボタンを押さない方がはるかに簡単です）。 それはOODAループにレンチを投げ込み、ユーザーがこの機能を使用する頻度に影響を与え、ひいてはアプリ自体の品質に影響を与えることは間違いありません。

これを間違えないでください---新しいパフォーマンスモニターはクールで、深く掘り下げる必要があるときに使用できますが、古い更新の強調表示のような迅速で汚い視覚化を単純に置き換えることはできません。

以前のバージョンの拡張機能をインストールする方法はありますか？

@Carduelis以前のバージョンのます：

上記の手順からChromeにv3をインストールしようと少し輪になって走りましたが、スタンドアロンのプロファイラーに変更を強調表示させることができませんでした。 そこで、それを機能させてコンポーネントの最適化に戻りたい場合は、詳細な手順を説明しました。

React Dev Tools V3のインストール（ステップバイステップの説明） ：
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

少し怒鳴るかもしれませんが、技術的なレベルでは「詳細なプロファイリングツール」>「ばかげたハイライト機能」のように見えるかもしれませんが、私たちはすべて人間であり、単純な視覚的手がかりから多くの情報をすばやく収集します。いくつかの点で、ハイライト機能は非常に使いやすいという理由で非常に重要です。 私にとって、それが私がReact Dev Toolsを90％の時間開いている理由です。

少し怒鳴るかもしれませんが、技術的なレベルでは「詳細なプロファイリングツール」>「ばかげたハイライト機能」のように見えるかもしれませんが、私たちはすべて人間であり、単純な視覚的手がかりから多くの情報をすばやく収集します。いくつかの点で、ハイライト機能は非常に使いやすいという理由で非常に重要です。

ダンや私は、それが「使いやすい」とは考えていません。ただ、 「壊れていない」ものを「修正」することに時間を費やすように人々を促すかもしれないからです（遅くないものを最適化することよりも） 。 このパターンは、「パフォーマンス」コストが懸念されるためにインライン関数が広く回避されるなどのパターンで以前に見られました。 問題のないものを修正するために投資されるエネルギーは、他の潜在的により重要なものを修正するために費やされないエネルギーです。

上で

現実的には、それは私のプレートの最優先事項ではないので、この会話を繰り返すのではなく、忍耐を求めます。 この機能が重要であると聞いて認識しています。 利便性と上記の他の考慮事項を比較検討し、現在の状況以上のものを考え出します。

過度に最適化することについては、視覚的なレンダリングの強調表示がそれを促進できることを証明できます。 したがって、ここでの議論に何かを追加したいと思います。

この機能を見逃している人は、 https：//github.com/welldone-software/why-did-you-renderの方が参考になるかもしれません。

これは、この機能を実装するときに考慮すべきことかもしれません。 デフォルトでは、WhyDidYouRenderは詳細な値の比較を行い、再レンダリング間で実際に変更がなかった場合にのみレポートします。 ビジュアルレンダリングのハイライトにこれと同じフィルタリングを適用するのは素晴らしいことです。 これは、より思慮深い最適化を指示します（さらに、プロファイラーによって提供されない区別です）。

理論的には、パフォーマンスを気にせずにアプリ全体を再レンダリングできるはずなので、レンダリングの強調表示が表示されないようにSCUをどこにでも追加することは、逆効果です。

Reactがどのように機能するかについてのデモンストレーションには、再レンダリングのハイライトが役立つことがわかりました。

デフォルトでは、WhyDidYouRenderは詳細な値の比較を行い、再レンダリング間で実際に変更がなかった場合にのみレポートします。

これは、実際にパフォーマンスの問題があるアプリでは非常に遅いように聞こえます。 どんな種類の深い比較も、私たちが常にやりたいことではありません。 あなたがそれをオンにしている時点で（より遅いパフォーマンスをオプトインするために）、なぜプロファイラーを起動しないのですか？

これは、より思慮深い最適化を指示します（さらに、プロファイラーによって提供されない区別です）。

プロファイラーはこれのバージョンを提供します：

再レンダリングされたが、小道具/状態/フックが変更されていないコンポーネントが表示された場合、それがあなたが説明していることだと思います。

@bvaughn通常、一度に1つのコンポーネントの詳細比較のみをオンにします。 したがって、デフォルトですべてのコンポーネントに対してオンにするものではないことに同意します。 おそらく、その緑色のバーを右クリックして、[レンダリングの更新を強調表示]を選択するものです。
それはかなり滑らかで非常に便利ですが、それはあなたが掘り下げなければならないものです。

@bvaughn 「なぜこれがレンダリングされたのか」が大好きです。 機能（ Highlight Updatesが再考されている間）ですが、利用可能なすべてのドキュメントを読み、YouTubeチュートリアルをざっと読んだ後、いくつかのケースでそれを解釈する方法がまだわかりません。

アンダースコアの意味が直感的ではありません。

なぜこれがレンダリングされたのですか？

• 小道具が変更されました：（__）

私はフックAPIのみを使用しますが、それでも意味がわかりません。

なぜこれがレンダリングされたのですか？

• フックが変更されました

変更された実際のprops / stateがリストされている明らかなケース以外に、これらのケースとおそらく私がまだ遭遇していない他のケースについて1つか2つの説明がある可能性はありますか？

アンダースコアの意味が直感的ではありません。

アプリ内の何かが__という名前のプロップを渡しているようで、そのプロップはコミット間で変化しています😄

私はフックAPIのみを使用しますが、それでも意味がわかりません

＃16477をご覧ください

やあ

私はハイライトアップデートをよく使用していました。 私は頻繁に更新するアプリを開発しており、その未来は私の日々の仕事にとって不可欠でした。

@bvaughnが提示した解決策を

あなたはまだこれを実装するつもりですか？ そうでない場合、React Dev Toolsをダウングレードするにはどうすればよいですか？それなしでは開発できないからです。

あなたはまだこれを実装するつもりですか？ そうでない場合、React Dev Toolsをダウングレードするにはどうすればよいですか？それなしでは開発できないからです。

すでに@oztuneによって回答されています。

古いバージョンを元に戻すにはどうすればよいですか？
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the-old-version-back

古いバージョンを元に戻したいのですが。 新しいもので失われた機能がたくさんあり、それは不可能なほど役に立たない

古いバージョンを元に戻したいのですが。 新しいもので失われた機能がたくさんあり、それは不可能なほど役に立たない

古いバージョンを元に戻す方法は次のとおりです。
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

こんにちは@einarq実際に私は新しいバージョンで不足している機能を持っていたいです。 素敵な新しいものがたくさんありますが、古いもののいくつかは非常に重要であり、削除された方法ではわかりません。 ここで再レンダリングを確認するために、コンソールログをレンダリング関数に配置して、再レンダリングの数を減らしているかどうかを確認します。 理想的ではありませんが、機能します。 以前のバージョンでは、これが途方もなく簡単で役立つようになっていたため、他の不要な再レンダリングを見つけることができました。 さて、これはただ痛いです。

不足している機能を新しいバージョンに戻してください。

私の言葉では、新しいバージョンはあなたが持っていることを意味します：古いものの再設計と改善と新しい未来が追加されました。削除されず、以前のものとは異なる新しい機能が追加されました。

また、なぜ状態値を変更できないのですか？

そして、小道具ブール値はもうチェックボックスではありませんか？ とてもかっこよかったです。 そして再びなくなった。

状態を変更することはできず、小道具はfalse / trueと入力する必要があります。代わりに、クリックしてコンポーネントがこれにどのように反応するかを確認してください。

超迷惑。

こんにちは@PMustard 、

私はこれに取り組んでいません。新しいバージョンが気に入らない場合は、古いバージョンのdev-toolsを復活させるための1つの潜在的なアプローチを提案していました。 それは私のために働いた。

dev-toolsに取り組んでいるチーム（主にBrian Vaughnだと思いますか？）は、それらにいくつかの個別の問題を作成する場合、あなたの懸念を考慮に入れると確信しています。

また、感謝の気持ちを表すことも忘れないでください。 これらのツールは無料で入手できます:)
建設的なフィードバックのみ。

よろしく、

エイナル

この機能が緊急に必要な場合は、回避策として古いバージョンを使用できます： https ：//reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the -古いバージョン-戻る。 また、プロファイラーを使用してみることをお勧めします。 実行するのは少し手間がかかりますが、どの再レンダリングが重要でどれが重要でないかがわかります。 レンダリング数を数えるだけでは、実際のパフォーマンスの問題から気が散ることがよくあります。

予期しない再レンダリングを簡単に見つける方法があることは価値があることを理解しています。 https://github.com/facebook/react/issues/16437#issuecomment -523629000で、これは私たちのレーダーにあり、「これが必要です」というコメントは役に立たないと説明しました。 それでもこのスレッドは「これが必要です」というコメントを収集し続けているので、通知のフラッドを減らすためにロックします。 あなたの声が聞こえますのでご安心ください。

この機能を新しいDevTools（＃16989）に実装しましたが、次の点に注意してください。

• 現時点では、ブラウザー拡張機能（およびreact-devtools-inline NPMパッケージ）でのみ有効になっているため、ReactDOMのみをサポートします。
• レガシーレンダラー（v15）には実装されていませんが、フォローアップPRを送信したい場合に誰かが追加する可能性があります。

＃16989が着陸したので、この問題を閉じます。 本日、新機能を備えた4.2をリリースする可能性があります。