Die offizielle Reaktion docs heißt es: „ React.PureComponent
‚s shouldComponentUpdate()
nur seicht die Objekte vergleicht“, und rät dies , wenn Zustand‚tief‘.
Gibt es vor diesem Hintergrund einen Grund, warum man es vorziehen sollte React.PureComponent
, React-Komponenten zu erstellen?
Fragen :
- Gibt es irgendwelche Auswirkungen auf die Leistung bei der Verwendung
React.Component
, die wir in Betracht ziehen könntenReact.PureComponent
? - Ich vermute ,
shouldComponentUpdate()
derPureComponent
führt nur flache Vergleiche. Wenn dies der Fall ist, kann diese Methode nicht für tiefere Vergleiche verwendet werden? - „Darüber hinaus
React.PureComponent
istshouldComponentUpdate()
Sprünge prop - Updates für die gesamte Komponente subtree“ - Bedeutet dies , dass prop Änderungen ignoriert werden?
Die Frage ergab sich aus dem Lesen in diesem Medium Blog , ob es hilft.
Antworten:
Der Hauptunterschied zwischen
React.PureComponent
undReact.Component
istPureComponent
ein flacher Vergleich zu Zustandsänderung. Dies bedeutet, dass beim Vergleichen von Skalarwerten deren Werte verglichen werden, beim Vergleichen von Objekten jedoch nur Referenzen. Es hilft, die Leistung der App zu verbessern.Sie sollten sich entscheiden,
React.PureComponent
wann Sie eine der folgenden Bedingungen erfüllen können.forceUpdate
wenn sich Daten ändernWenn Sie verwenden
React.PureComponent
, sollten Sie sicherstellen, dass alle untergeordneten Komponenten auch rein sind.Ja, dies erhöht die Leistung Ihrer App (aufgrund des geringen Vergleichs).
Du hast es richtig erraten. Sie können es verwenden, wenn Sie eine der oben genannten Bedingungen erfüllen.
Ja, Requisitenänderungen werden ignoriert, wenn im flachen Vergleich kein Unterschied festgestellt werden konnte.
quelle
It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.
? Vielen DankState/Props should not have a hierarchy
Entschuldigung, können Sie ein bisschen erklären, was Hierarchie hier bedeutet?Component
undPureComponent
einen Unterschied habenPureComponent
ist genau das gleiche wie mit derComponent
Ausnahme, dass es dieshouldComponentUpdate
Methode für Sie behandelt.Wenn sich Requisiten oder Status ändern,
PureComponent
wird ein flacher Vergleich von Requisiten und Status durchgeführt.Component
Auf der anderen Seite werden aktuelle Requisiten und Status nicht mit dem nächsten sofort verglichen. Daher wird die Komponente bei jedemshouldComponentUpdate
Aufruf standardmäßig neu gerendert .Flacher Vergleich
Beim Vergleich früherer Requisiten und des Status mit dem nächsten wird durch einen flachen Vergleich überprüft, ob Grundelemente denselben Wert haben (z. B. 1 ist gleich 1 oder wahr ist gleich wahr) und ob die Referenzen zwischen komplexeren Javascript-Werten wie Objekten und Arrays gleich sind.
Quelle: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81
quelle
Der Hauptunterschied besteht meines Erachtens darin, dass eine Komponente jedes Mal neu gerendert wird, wenn ihre übergeordneten Elemente erneut gerendert werden, unabhängig davon, ob sich die Requisiten und der Status der Komponente geändert haben.
Eine reine Komponente hingegen wird nicht erneut gerendert, wenn ihre übergeordneten Komponenten erneut gerendert werden, es sei denn, die Requisiten (oder der Status) der reinen Komponente haben sich geändert.
Nehmen wir zum Beispiel an, wir haben einen Komponentenbaum mit einer dreistufigen Hierarchie: Eltern, Kinder und Enkelkinder.
Wenn die Requisiten der Eltern so geändert werden, dass die Requisiten nur eines Kindes geändert werden, dann:
Manchmal hat die Verwendung reiner Komponenten jedoch keine Auswirkungen. Ich hatte einen solchen Fall, als der Elternteil seine Requisiten von einem Redux-Laden erhielt und eine komplexe Berechnung der Requisiten seiner Kinder durchführen musste. Der Elternteil verwendete eine flache Liste, um seine Kinder zu rendern.
Das Ergebnis war, dass jedes Mal, wenn sich der Redux-Speicher geringfügig änderte, das gesamte Flatlist-Array der Kinderdaten neu berechnet wurde. Dies bedeutete, dass die Requisiten für jede Komponente im Baum neue Objekte waren, auch wenn sich die Werte nicht änderten.
In diesem Fall helfen reine Komponenten nicht, und die Leistungssteigerung kann nur erreicht werden, indem reguläre Komponenten verwendet und die untergeordneten Elemente in shouldComponentUpdate eingecheckt werden, wenn ein erneuter Render erforderlich ist.
quelle