In dieser Dokumentation von React heißt es:
flatCompare führt eine flache Gleichheitsprüfung für die aktuellen Requisiten- und nextProps-Objekte sowie für die aktuellen Status- und nextState-Objekte durch.
Das, was ich nicht verstehen kann, ist: Wenn es die Objekte flach vergleicht, gibt die Methode shouldComponentUpdate immer true zurück, as
Wir sollten die Staaten nicht mutieren.
und wenn wir die Zustände nicht mutieren, gibt der Vergleich immer false zurück, und daher sollte das shouldComponent-Update immer true zurückgeben. Ich bin verwirrt darüber, wie es funktioniert und wie wir dies überschreiben werden, um die Leistung zu steigern.
quelle
Ein flacher Vergleich liegt vor, wenn die Eigenschaften der zu vergleichenden Objekte mit "===" oder strikter Gleichheit durchgeführt werden und keine tieferen Vergleiche der Eigenschaften durchgeführt werden. für zB
Obwohl beide Objekte gleich zu sein scheinen,
game_item.teams
ist dies nicht die gleiche Referenz wieupdated_game_item.teams
. Damit 2 Objekte gleich sind, sollten sie auf dasselbe Objekt zeigen. Dies führt also dazu, dass der zu bewertende Zustand aktualisiert wirdDiesmal gibt jede der Eigenschaften für den strengen Vergleich true zurück, da die Team-Eigenschaft im neuen und alten Objekt auf dasselbe Objekt verweist.
Die
updated_game_item3.first_world_cup
Eigenschaft besteht die strenge Bewertung nicht, da 1930 eine Zahl ist, währendgame_item.first_world_cup
es sich um eine Zeichenfolge handelt. Wäre der Vergleich locker gewesen (==), wäre dies vorbei. Dies führt jedoch auch zu einer Statusaktualisierung.Zusätzliche Bemerkungen:
quelle
prevObj
ein Schlüssel enthalten ist,newObj
der nicht vorhanden ist, schlägt der Vergleich fehl.quelle
Es gibt auch eine Legacy-Erklärung für flache Vergleiche in React:
UPD : Aktuelle Dokumentation sagt über flache Vergleiche:
UPD2: Ich denke, Versöhnung ist auch ein wichtiges Thema für ein flaches Vergleichsverständnis.
quelle
Das flache gleiche Snippet von @supi oben ( https://stackoverflow.com/a/51343585/800608 ) schlägt fehl, wenn
prevObj
ein Schlüssel vorhanden ist,newObj
der nicht vorhanden ist. Hier ist eine Implementierung, die dies berücksichtigen sollte:Beachten Sie, dass das oben Genannte im Explorer ohne Polyfills nicht funktioniert.
quelle
Es gibt eine Implementierung mit Beispielen.
quelle