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önnten React.PureComponent?
• Ich vermute , shouldComponentUpdate()der PureComponentführt nur flache Vergleiche. Wenn dies der Fall ist, kann diese Methode nicht für tiefere Vergleiche verwendet werden?
• „Darüber hinaus React.PureComponentist shouldComponentUpdate()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.

Der Hauptunterschied zwischen React.PureComponentund React.Componentist PureComponentein 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.PureComponentwann Sie eine der folgenden Bedingungen erfüllen können.

• Staat / Requisiten sollten ein unveränderliches Objekt sein
• Staat / Requisiten sollten keine Hierarchie haben
• Sie sollten anrufen, forceUpdatewenn sich Daten ändern

Wenn Sie verwenden React.PureComponent, sollten Sie sicherstellen, dass alle untergeordneten Komponenten auch rein sind.

Gibt es irgendwelche Auswirkungen auf die Leistung bei der Verwendung von React.component, die wir möglicherweise für React.PureComponent in Betracht ziehen?

Ja, dies erhöht die Leistung Ihrer App (aufgrund des geringen Vergleichs).

Ich vermute, sollteComponentUpdate () von Purecomponent nur flache Vergleiche durchführen. Wenn dies der Fall ist, kann die genannte Methode nicht für tiefere Vergleiche verwendet werden?

Du hast es richtig erraten. Sie können es verwenden, wenn Sie eine der oben genannten Bedingungen erfüllen.

"Außerdem überspringt sollteComponentUpdate () von React.PureComponent Prop-Updates für den gesamten Komponenten-Teilbaum" - Bedeutet dies, dass Prop-Änderungen ignoriert werden?

Ja, Requisitenänderungen werden ignoriert, wenn im flachen Vergleich kein Unterschied festgestellt werden konnte.

Componentund PureComponenteinen Unterschied haben

PureComponentist genau das gleiche wie mit der ComponentAusnahme, dass es die shouldComponentUpdateMethode für Sie behandelt.

Wenn sich Requisiten oder Status ändern, PureComponentwird ein flacher Vergleich von Requisiten und Status durchgeführt. ComponentAuf der anderen Seite werden aktuelle Requisiten und Status nicht mit dem nächsten sofort verglichen. Daher wird die Komponente bei jedem shouldComponentUpdateAufruf 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

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:

• Wenn alle Komponenten reguläre Komponenten sind, wird der gesamte Komponentenbaum erneut gerendert
• Wenn alle Kinder und Enkelkinder reine Komponenten sind, wird nur ein Kind und eines oder alle seiner Enkelkinder erneut rendern, je nachdem, ob ihre Requisiten geändert werden. Wenn dieser Komponentenbaum viele Komponenten enthält, kann dies eine erhebliche Leistungssteigerung bedeuten.

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.