React: Devtools V4: Wo sind Highlight-Updates?

Gleiches Problem hier. Highlight-Updates sind weg.
Ich habe mich gefragt, ob man jetzt den Profiler verwenden muss, um Updates zu verfolgen?

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

Die ehrliche Antwort ist, dass wir nicht die Zeit hatten, es zu implementieren, und es nicht für wichtig genug hielten, um die Veröffentlichung aller anderen Funktionen zu blockieren.

Es gibt jedoch tiefere Gründe, warum wir nicht sicher sind, ob wir es wieder hinzufügen würden. Es trägt zu der falschen Vorstellung bei, dass Re-Renderings an sich schlecht sind (sie sind es nicht, wenn sie billig sind). Die Leute verbringen also Zeit damit, nutzlose Dinge zu optimieren und tatsächliche Leistungsprobleme zu übersehen.

Die neuen DevTools enthalten einen Profiler, der Ihnen helfen soll, tatsächliche Leistungsprobleme in Ihrem Code zu finden. Ich verstehe den Wunsch nach einer superleichten Methode, um zusätzliche Renderings zu finden – und vielleicht werden wir das hinzufügen –, aber wir müssen zuerst mehr darüber nachdenken, wie es funktionieren sollte.

Bearbeitet , um Inline-Kommentare hinzuzufügen

Einige verwandte frühere Diskussionen https://github.com/bvaughn/react-devtools-experimental/issues/244

Highlight Updates waren nicht sehr nützlich, um Leistungsprobleme zu beheben (der neue Profiler ist darin viel besser), sondern um überraschende Renderings zu entdecken. Es hat uns unzählige Male erspart, insbesondere bei der Arbeit mit Context, bei der eine Änderung zu erneuten Renderings in anderen Teilen der App führen kann. Bei der Arbeit am Profiler tendieren Sie dazu, sich nur auf einen Teil des Baums zu konzentrieren, sodass Regressionen leicht übersehen werden.

Ich verstehe die Bedenken von @gaearon , die falsche Idee zu vermitteln, also wie wäre es mit:

1. Wählen Sie die Umrissfarbe basierend auf der Renderdauer

Billige Putze sollten grün sein, teure Putze sollten gelb oder rot sein. Oder verwenden Sie einfach die gleichen Farben, die vom Profiler verwendet werden.

2. Variieren Sie die Umriss-Fade-Geschwindigkeit

Die Überblendanimation der Kontur sollte relativ zur Renderdauer sein. Schnelle Renderings sollten sofort verblassen, langsame Renderings sollten langsamer verblassen.

3. Unterscheiden Sie neu lackierte Bereiche

Ich habe manchmal Highlight Updates mit Chromes Paint Flashing . Dadurch wurden Renderings, die zu einem Repaint führten, anders hervorgehoben als Renderings ohne DOM-Effekt. Ich denke, DevTools sollte eine ähnliche Funktion eingebaut haben.

• Ein teures Rendering ohne Repaints sollte das primäre Ziel für Leistungsoptimierungen sein.
• Renderings, die neu gemalt werden, machen offensichtlich einige Arbeit, die erledigt werden muss.
• Schnelle Renderings, die zu keinem Repaint führen, können ignoriert werden.

Vielleicht haben Sie sogar eine Einstellung, die nur die erste der oben genannten blinkt (mit einem konfigurierbaren Schwellenwert).

Die Identifizierung eines "billigen" oder "schnellen" Renderings ist nicht so einfach, wie es scheint, aufgrund von Faktoren wie:

• Entwicklungs-Builds sind viel langsamer als Produktions-Builds.
• Entwickler-Laptops sind im Allgemeinen viel schneller als Endbenutzer-Laptops.

Das Schöne am Profiler ist, dass er die Geschwindigkeit als relativ anzeigt, sodass Sie sich auf den langsamsten Teil einer Anwendung in einer bestimmten Sitzung konzentrieren können. (Sie müssen entscheiden, wann der langsamste Teil schnell genug ist.) Dies kann jedoch nur im Nachhinein erfolgen.

Es gibt Ihnen auch einen statischen Snapshot der Commits und welche Requisiten/Status sich geändert haben, so dass Sie nicht nur sehen können, wie oft eine bestimmte Komponente gerendert wurde (war es mehr als Sie erwartet hatten?), sondern auch speziell _warum_ sie neu gerendert wurde und was noch? damit neu gerendert.

Ich denke, es besteht eine gute Chance, dass wir als Teil von Profiler eine Art Update-Flashing-Mechanismus zu DevTools hinzufügen. Vielleicht blinkt es (wie früher) nur, wenn die Profilerstellung aktiv ist? Vielleicht blinkt jede Komponente, die neu gerendert wurde, wenn Sie einen neuen Commit im Profiler auswählen, nachdem die Profilerstellung beendet wurde? (Ich mag diese Idee irgendwie, da man damit "wiederholen" kann, wenn man etwas verpasst hat.) Wir müssen ein bisschen damit experimentieren und sehen, was am besten funktioniert.

Ich habe diese Funktion häufig verwendet, um sicherzustellen, dass nur die Komponenten gerendert werden, die gerendert werden sollten. Ich habe eine App, die dieselbe Komponente mehrmals mit unterschiedlichen IDs rendert, und ich möchte sicherstellen, dass nur diejenige gerendert wird, die erneut gerendert werden muss, und nicht alle. Ich sehe keine Möglichkeit, dies mit dem neuen Profiler zu überprüfen.

Ich sehe keine Möglichkeit, dies mit dem neuen Profiler zu überprüfen

Was hast du probiert? Der Profiler sollte klar zeigen, ob ein Kind neu rendert oder viele.

Ich habe häufig "Updates hervorheben" verwendet. Es war die Funktion von Dev-Tools, die ich am häufigsten verwendet habe. Nur um zu sehen, was aktualisiert wurde, nicht wie oft. Sicher, Sie können dazu den Profiler verwenden, aber das ist erheblich umständlicher als eine schnelle visuelle Anzeige.

Für mich war "Updates hervorheben" das "Killer-Feature" ...

Wir hören euch :-) Ich denke nicht, dass weitere Kommentare, die nur sagen "Ich habe das benutzt" in diesem Thread wesentlich helfen werden, was es wert ist. Wir wissen, dass es Leute gibt, die diese Funktion nutzen, und überlegen, wie man sie am besten zurückbringt. Danke für die Rückmeldung!

Diese Option war eine wesentliche Komponente für meinen täglichen Arbeitsprozess, um Probleme beim erneuten Rendern sofort anzuzeigen. Daher würde ich mich sehr freuen, wenn ihr dieses tolle Feature bald wieder zurückbringen könntet.

+1 für das Zurückbringen einer Version dieser Funktion, die eine schnelle Übersicht über erneute Renderings ermöglicht (sogar für erneute Renderings, die wie bei der Aktualisierung von Context völlig in Ordnung sind).

+1 beim Zurückbringen

Daher würde ich mich sehr freuen, wenn ihr dieses tolle Feature bald wieder zurückbringen könntet.

Wie oben angefordert:

Ich glaube nicht, dass weitere Kommentare, die nur "Ich habe das benutzt" sagen, wesentlich helfen werden

Um dies expliziter zu formulieren:

Wir hören dich!

Es gibt viele Leute, die dieses Repository abonniert haben. Wir wollen sie nicht alle paar Stunden mit den gleichen Kommentaren spammen. Darüber hinaus verwenden wir persönlich GitHub-Benachrichtigungen. Wenn dieser Thread jeden Tag mit einem "+1" gestoßen wird, müssen wir ihn irgendwann abbestellen, um das Rauschen zu reduzieren. Was wahrscheinlich das Gegenteil Ihrer Absicht ist.

Stellen Sie vor dem Kommentieren sicher, dass Sie etwas hinzufügen, das zuvor noch nicht gesagt wurde. Wenn Sie einen ähnlichen Kommentar sehen, den Sie schreiben wollten, fügen Sie stattdessen einfach eine 👍-Reaktion hinzu.

Danke für Ihr Verständnis.
Wir freuen uns über Ihr Feedback, aber 👍s reichen aus, um Aufgaben zu priorisieren.

dass Sie etwas hinzufügen, das vorher nicht gesagt wurde.

Ich möchte fragen, gibt es eine Möglichkeit, die vorherige Version der Erweiterung zu installieren? Tatsächlich hat das Update den Flow unterbrochen, den ich früher hatte. Leider erlaubt Ihnen der Chrome-Erweiterungsmarktplatz nicht, die vorherige Version wie 'npm' zu installieren. Hast du einen Link mit kompilierter Erweiterung? Dankeschön.
_(Ich habe versucht, die Standalone-Version zu installieren, aber dieser Link vom v3-Repo ist defekt, der Link zur Crome-Erweiterung führt zur neuesten Version)_

Die neuen DevTools enthalten einen Profiler, der Ihnen helfen soll, tatsächliche Leistungsprobleme in Ihrem Code zu finden.

Und hier ist eine Antwort, warum die neue Erweiterung meinen Flow unterbrochen hat. Profiler fordert Sie auf, die Tasten zu drücken, um die Profilerstellung zu starten und dann zu beenden, aber dies geschieht nicht sofort. Mit Updates Highlighter sehen Sie alles ohne zusätzliche Bewegungen. Es zeigt Ihnen auch auf sehr intuitive Weise die aktuellen Updates und was tatsächlich ausgelöst wurde.

Das erinnert mich an den eigenen Leistungsmonitor von Chrome DevTools, der früher auch live aktualisiert wurde und dann eines Tages auf press-to-record migriert wurde. Dieser Schritt war wahrscheinlich aufgrund der Komplexität und der Auswirkungen auf die Leistung sinnvoll, aber der Punkt ist, dass er enorme Reibung verursacht (wie @Carduelis betont , ist es viel einfacher, die Start-/Stopp-Tasten nicht zu drücken). Es wirft einen Schraubenschlüssel in die OODA-Schleife und wird sich zweifellos darauf auswirken, wie oft Benutzer diese Funktion verwenden, und wirkt sich wiederum auf die Qualität der App selbst aus.

Verstehen Sie das nicht falsch --- der neue Perf-Monitor ist cool und hat seinen Nutzen, wenn Sie tief graben müssen, aber er kann nicht einfach die Quick & Dirty-Visualisierungen wie das alte Update-Highlighting ersetzen.

Ich möchte fragen, gibt es eine Möglichkeit, die vorherige Version der Erweiterung zu installieren?

@Carduelis Installationsanweisungen für die vorherige Version von DevTools finden Sie im Release-Blog-Post: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get- die-alte-version-zurück

Ich bin ein wenig im Kreis gelaufen und habe versucht, v3 anhand der obigen Anweisungen in Chrome zu installieren, und konnte den eigenständigen Profiler einfach nicht dazu bringen, Änderungen hervorzuheben. Also habe ich eine detaillierte Schritt-für-Schritt-Anleitung gemacht, wenn Sie es einfach zum Laufen bringen und Ihre Komponenten optimieren möchten:

Installieren von React Dev Tools V3 (Schritt-für-Schritt-Anleitung) :
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

Wenn ich ein bisschen schimpfen darf, während es auf technischer Ebene wie "tiefgehende Profiling-Tools" > "ein dummes Highlighting-Feature" erscheinen mag, sind wir alle nur Menschen und wir erhalten viele Informationen schnell aus einfachen visuellen Hinweisen, also In gewisser Weise ist die Hervorhebungsfunktion eine ziemlich große Sache, gerade weil sie so einfach zu bedienen ist. Für mich ist das der Grund, warum ich in 90% der Fälle React Dev Tools öffne.

Wenn ich ein bisschen schimpfen darf, während es auf technischer Ebene wie "tiefgehende Profiling-Tools" > "ein dummes Highlighting-Feature" erscheinen mag, sind wir alle nur Menschen und wir erhalten viele Informationen schnell aus einfachen visuellen Hinweisen, also In gewisser Weise ist die Hervorhebungsfunktion eine ziemlich große Sache, gerade weil sie so einfach zu bedienen ist.

Ich glaube nicht, dass Dan oder ich darüber diskutiert haben, dass es "einfacher zu bedienen" ist, nur dass es die Leute ermutigen könnte, Zeit in die "Reparatur" von Dingen zu investieren, die nicht "kaputt" sind (auch bekannt als die Optimierung von Dingen, die nicht langsam sind). . Wir haben dieses Muster bereits bei Dingen wie der weit verbreiteten Vermeidung von Inline-Funktionen aufgrund von befürchteten "Performance"-Kosten gesehen. Energie, die in die Behebung von Nicht-Problemen investiert wird, ist Energie, die nicht für die Behebung anderer potenziell wichtigerer Dinge aufgewendet wird.

Wie bereits erwähnt , besteht eine gute Chance, dass wir DevTools als Teil von Profiler eine Art Update-Flashing-Mechanismus hinzufügen.

Realistischerweise hat dies jedoch nicht die höchste Priorität auf meinem Teller, also werde ich um Geduld bitten, anstatt dieses Gespräch zu wiederholen. Wir hören und erkennen an, dass diese Funktion wichtig ist. Wir werden versuchen, die Bequemlichkeit gegen die anderen oben genannten Überlegungen abzuwägen und uns etwas mehr einfallen zu lassen, als wir derzeit haben.

Bis hin zur Überoptimierung kann ich bestätigen, dass die visuelle Hervorhebung des Renderns dies fördern kann. Daher möchte ich hier etwas zur Diskussion hinzufügen.

Für diejenigen, die die Funktion vermissen, finden Sie möglicherweise https://github.com/welldone-software/why-did-you-render informativer.

Dies kann bei der Implementierung dieser Funktion berücksichtigt werden. Standardmäßig führt WhyDidYouRender einen tiefen Wertvergleich durch und meldet nur, wenn sich die Dinge zwischen den erneuten Renderings nicht geändert haben. Es wäre großartig, dieselbe Filterung für die visuellen Render-Highlights zu haben. Dies würde zu durchdachteren Optimierungen führen (und es ist eine Unterscheidung, die der Profiler nicht bietet).

Theoretisch sollte es möglich sein, die gesamte App ohne Leistungseinbußen neu zu rendern, so dass das Hinzufügen von SCU überall, um zu vermeiden, dass die Render-Hervorhebung zu sehen ist, ein kontraproduktiver Weg ist.

Ich fand das Render-Highlight immer noch nützlich für Demonstrationen, wie React funktioniert.

Standardmäßig führt WhyDidYouRender einen tiefen Wertvergleich durch und meldet nur, wenn sich die Dinge zwischen den erneuten Renderings nicht geändert haben.

Das klingt super langsam für Apps, die tatsächlich Leistungsprobleme haben. Jede Art von tiefgreifendem Vergleich ist sicherlich nicht etwas, was wir immer tun möchten. An dem Punkt, an dem Sie es einschalten (um sich für eine langsamere Perf-Funktion zu entscheiden), warum starten Sie dann nicht einfach den Profiler?

Dies würde zu durchdachteren Optimierungen führen (und es ist eine Unterscheidung, die der Profiler nicht bietet).

Der Profiler bietet eine Version davon:

Wenn Sie eine Komponente sehen, die neu gerendert wurde, aber keine geänderten Requisiten/Status/Hooks hat, beschreiben Sie das meiner Meinung nach.

@bvaughn Nun, Sie
Das ist ziemlich glatt und super nützlich, aber es ist etwas, wonach Sie graben müssen.

@bvaughn Ich liebe das "Warum wurde das Highlight Updates überdacht), aber nachdem ich die gesamte verfügbare Dokumentation gelesen und dein YouTube-Tutorial überflogen habe, bin ich mir immer noch nicht sicher, wie ich es für einige Fälle interpretieren soll:

Nicht intuitiv, was der Unterstrich bedeutet:

Warum hat das gerendert?

• Requisiten geändert: (__)

Ich verwende nur die Hooks-API, bin mir aber der Bedeutung immer noch nicht sicher:

Warum hat das gerendert?

• Haken geändert

Besteht die Möglichkeit, dass es ein oder zwei Sätze für diese Fälle und vielleicht andere gibt, denen ich noch begegnen muss, abgesehen von dem offensichtlichen Fall, in dem die tatsächlichen props / state aufgelistet sind, die sich geändert haben?

Nicht intuitiv, was der Unterstrich bedeutet:

Anscheinend übergibt etwas in Ihrer App eine Requisite namens __ und diese Requisite ändert sich zwischen den Commits 😄

Ich benutze nur die Hooks-API, bin mir aber immer noch nicht sicher, was die Bedeutung ist

Siehe #16477

Hi

Ich habe viel Highlight-Updates verwendet. Ich entwickle eine häufig aktualisierte App und diese Zukunft war für mich für meine tägliche Arbeit unerlässlich.

Ich bekomme die Lösung, die @bvaughn präsentiert hat. Es ist super nützlich, aber ich kann es wegen der Bildwiederholfrequenz nicht auf mein Szenario anwenden. Ich brauche eher eine schnelle Anzeige als ein Profiling-Tool, das übrigens großartig aussieht.

Willst du das noch zurück implementieren?? Wenn nicht, wie kann ich meine React Dev Tools downgraden, da ich ohne sie einfach nicht entwickeln kann.

Willst du das noch zurück implementieren?? Wenn nicht, wie kann ich meine React Dev Tools downgraden, da ich ohne sie einfach nicht entwickeln kann.

Wurde schon von @oztune beantwortet.

Wie bekomme ich die alte Version zurück?
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back

Ich möchte bitte die alte Version zurück. Es gibt so viel Funktionalität, die im neuen verloren gegangen ist und es ist unmöglich hilfreich

Ich möchte bitte die alte Version zurück. Es gibt so viel Funktionalität, die im neuen verloren gegangen ist und es ist unmöglich hilfreich

So bekomme ich die alte Version zurück, hat bei mir funktioniert:
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

HI @einarq eigentlich hätte ich gerne fehlende Funktionalität in der neuen Version. Ich sehe viele schöne neue Dinge, aber einige der alten waren entscheidend und ich verstehe es nicht so, wie es entfernt wurde. Um jetzt Renderer zu überprüfen, habe ich eine Konsolen-Log-in-Render-Funktion eingerichtet, um zu erkennen, ob ich eine Anzahl von Rendern reduziere oder nicht. Es ist nicht ideal, aber es funktioniert. Die vorherige Version machte dies lächerlich einfach und hilfreich, da sie mir auch andere nicht benötigte Renderer anzeigt, die ich erkennen konnte. Das tut jetzt nur noch weh.

Bitte setzen Sie diese fehlenden Funktionalitäten auf die neue Version zurück.

In meinem Wort bedeutet neue Version, dass Sie Folgendes haben: Redesign und Verbesserungen der älteren und neue hinzugefügte Futures. Nicht entfernt und neue Funktionen hinzugefügt, die sich von der vorherigen unterscheiden.

Warum kann ich die Statuswerte jetzt nicht ändern??

Und Requisiten Boolean sind keine Checkboxen mehr ?? Das war so cool. Und wieder weg.

Jetzt kann der Zustand nicht geändert werden und Requisiten, die ich falsch / wahr eingeben muss, klicken Sie einfach und sehen Sie, wie eine Komponente darauf reagiert.

Super nervig.

Hallo @PMustard ,

Ich arbeite nicht daran, ich habe nur einen möglichen Ansatz vorgeschlagen, um die alte Version der Dev-Tools zurückzubringen, wenn Ihnen die neue nicht gefällt. Bei mir hat es funktioniert.

Ich bin sicher, dass das Team, das an den Entwicklungstools arbeitet (hauptsächlich Brian Vaughn, nehme ich an?) Ihre Bedenken berücksichtigen würde, wenn Sie einige separate Probleme für sie erstellen.

Und vergessen Sie nicht, auch etwas Wertschätzung zu zeigen. Wir bekommen diese Tools kostenlos :)
Nur konstruktives Feedback.

Grüße,

Einar

Wenn Sie dieses Feature dringend benötigen, können Sie als Workaround eine alte Version verwenden: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the -alte-Version-zurück. Ich empfehle Ihnen auch, den Profiler zu verwenden. Auch wenn die Ausführung etwas aufwändiger ist, erfahren Sie, welche Re-Renderings wichtig sind und welche nicht. Das bloße Zählen von Rendering-Zahlen lenkt oft von tatsächlichen Leistungsproblemen ab.

Wir wissen, dass es wertvoll ist, unerwartete Renderer auf einfache Weise zu erkennen. Wir haben in https://github.com/facebook/react/issues/16437#issuecomment -523629000 erklärt, dass dies auf unserem Radar ist und dass weitere Kommentare mit der Aufschrift „Ich brauche das“ nicht hilfreich sind. Da dieser Thread dennoch weiterhin "Ich brauche das"-Kommentare sammelt, werde ich ihn sperren, um die Benachrichtigungsflut zu reduzieren. Bitte seien Sie versichert, dass Ihre Stimme gehört wird.

Ich habe dieses Feature in den neuen DevTools (#16989) mit den folgenden Einschränkungen implementiert:

• Es ist vorerst nur in der Browsererweiterung (und im react-devtools-inline NPM-Paket) aktiviert, unterstützt also nur React DOM.
• Es ist nicht für Legacy-Renderer (v15) implementiert, obwohl es von jemandem hinzugefügt werden könnte, der eine Folge-PR einreichen möchte.

Schließe dieses Problem jetzt, da #16989 landet. Wird wahrscheinlich heute 4.2 mit dem neuen Feature veröffentlichen.