React 16.4.0 ist also herausgekommen! (Hinweis Übersetzer - Diese Funktion wurde in Version 16.4.0 hinzugefügt, dann wurde dieser Beitrag geschrieben). Und in solchen Momenten verstehen Sie, wie Javascript Sie als Geek sind, wenn Sie auf kleinere Aktualisierungen Ihres bevorzugten Frameworks gespannt sind. Großartig!
Wenn Sie die vom React-Team veröffentlichten Versionshinweise
für Version 16.4 gelesen haben, sollte dieses Update als ziemlich langweilig angesehen werden.
Zeigerereignisse sehen attraktiv aus, aber um ehrlich zu sein, habe ich bisher wenig darüber gehört.
Zusätzlich gibt es einen Bugfix für eine Art neue
getDerivedStateFromProps Methode (jetzt wird sie bei jedem Render aufgerufen). Ich habe dies noch nicht genug benutzt, daher war dieses Update für mich nicht sehr wichtig.
Dann sah ich die Ankündigung unter den Überschriften, dass sie eine neue experimentelle Komponente hinzugefügt hatten,
unstable_Profiler . Als ich sah, dass mein Leben jetzt ziemlich instabil ist (
unstable_ ), beschloss ich, den
RFC zu lesen und es zu versuchen.
TLDR
Mitarbeiter des React-Teams
versuchen, das Rendern asynchron zu gestalten . Dies kann es schwierig machen zu bestimmen, wann Komponenten beim Mounten / Aktualisieren gerendert werden sollen. Daher spielen sie mit dieser glänzenden neuen
Profiler Komponente herum.
Was können Sie heute verwenden?Wenn Sie ein Profi bei der Verfolgung der Leistung Ihrer Reaktionsanwendungen sind, ist dies definitiv ein weiteres gutes Werkzeug in Ihrem Arsenal. Wenn es nicht um Sie geht, können Sie nicht mehr lesen und wieder coole Anwendungen erstellen.
Verwenden von <Profiler />
Warnung : Vielleicht sollten Sie dies nicht in der Produktion verwenden (nun, eigentlich ist dies unstable_ ). Später werden sie die Fähigkeit zum Profilieren und Produzieren von Code beenden.Grundsätzlich ist
Profiler eine Komponente, die aus dem Standard-React-Paket extrahiert werden kann. Da es einen vorsichtigen, unterstrichenen Namen gibt, auf den viele Linters schwören, können Sie dies wie folgt umgehen:
import React, { unstable_Profiler as Profiler } from 'react'; ... const Profiler = React.unstable_Profiler;
Nachdem Sie
Profiler , können Sie die Komponenten profilieren! Sie können jeden Teil Ihres JSX-Baums in
Profiler zu sehen, was damit passiert.
Profiler akzeptiert die
onRender Funktion, die Informationen zur Renderzeit erfasst.
Hier ist ein einfaches Gegenbeispiel :
import React, { unstable_Profiler as Profiler } from 'react'; class ComponentWithProfiling extends React.Component { state = { count: 0 }; logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => { console.log(`${id}'s ${phase} phase:`); console.log(`Actual time: ${actualTime}`); console.log(`Base time: ${baseTime}`); console.log(`Start time: ${startTime}`); console.log(`Commit time: ${commitTime}`); }; go = direction => () => this.setState(({ count }) => ({ count: direction === "up" ? count + 1 : count - 1 })); render() { return ( <Profiler id="app" onRender={this.logProfile}> <button onClick={this.go("up")}>️</button> <div>The count is {this.state.count}</div> <button onClick={this.go("down")}></button> </Profiler> ); } }
Beachten Sie, dass Sie jedem Fragment, das Sie profilieren, eine
id onRender . Wie Sie unten sehen können, akzeptiert
onRender eine Reihe interessanter Metriken:
7jroojkv30.codesandbox.ioErstens können Sie sehen, wie die Rendering-Phase war (entweder
mount oder
update ). Dies kann verwendet werden, um Teile des Codes zu identifizieren, die unerwartet aktualisiert werden (genau wie das ausgezeichnete
Warum-haben-Sie-Update- Paket, das ich oft verwendet habe und sehr zu empfehlen).
Als nächstes erhalten wir
actualTime und
baseTime . Sie beziehen sich auf die tatsächliche Zeit, die React für das Rendern von Berechnungen benötigt. d.h. herauszufinden, was sich geändert hat. Bitte beachten Sie, dass die tatsächliche Zeit (Anfangszeit) der Erstverbindung (Mount) länger ist als die Aktualisierungszeit (Aktualisierung). Dies liegt daran, dass bei der ersten Verbindung technisch alles „neu“ ist. Während der Aktualisierung
sollten die Berechnungen einfacher sein, da die Komponenten im Baum hoffentlich nur aktualisiert werden, wenn sie sich tatsächlich geändert haben (dh wenn sich die Werte von prop / state geändert haben).
In großen / realen Anwendungen können Sie
shouldComponentUpdate dieser Daten nachvollziehen, wo
shouldComponentUpdate falsch oder gar nicht verwendet wird, wo Requisiten mit Referenztypen häufig geändert werden oder neue Requisiten gesendet werden oder nur Orte, an denen Sie nicht erwartet haben, dass Updates so lange dauern.
Die letzten Werte, die wir in
onRender sind
startTime und
commitTime . Dies sind in der Tat Zeitstempel seit dem ersten Start.
startTime ist der Zeitpunkt, ab dem die ausgewählte Komponente Berechnungen für das Rendern durchführt, während
commitTime der Zeitpunkt ist, zu dem React diese Änderungen während des Renderns tatsächlich
festgeschrieben hat .
Wenn Sie andere Ereignisse mit Zeitstempeln (z. B. Klicks oder Tastenanschläge) verfolgen, können diese Metriken dazu beitragen, Deltas zwischen dem Auftreten von Benutzerereignissen und dem tatsächlichen Rendern zu identifizieren. Wenn die Lücke groß ist, kann diese Verzögerung für Benutzer spürbar sein und sollte sorgfältig untersucht werden.
Fazit
Für mich persönlich ist dieses Tool noch nicht sehr nützlich. Aber dies ist eines der Dinge, über die man gut Bescheid wissen sollte, denn wenn ich jemals auf diese Leistungsengpässe stoße, wäre dies eine gute Möglichkeit, sie zu messen.
Es ist wichtig, zuerst Ihre Leistungsprobleme zu messen. Wenn Sie also „Verbesserungen“ vornehmen, können Sie feststellen, ob dies die Situation wirklich verbessert oder nur verschlechtert. Ich fand, dass die Optimierung der Leistung eines der Dinge ist, für die Sie viel Zeit aufwenden können. Bevor Sie etwas optimieren, stellen Sie daher sicher, dass es wirklich notwendig ist.
Ich freue mich darauf, was das React-Team in Zukunft mit
Profiler wird. Vielen Dank an
@bvaughn für das Hinzufügen dieser
raffinierten Funktion!
Vom Übersetzer:Derzeit (aktuelle Version 16.6.0) funktioniert Profiler nicht mit serverseitigem Rendering.
Funktionsanforderung existiert bereits.