Wann man Functional setState verwenden sollte

Reacts setState-Funktion bietet zwei Syntaxen zum Aktualisieren des Komponentenstatus: die direkte Zuweisungssyntax und die funktionale Updater-Syntax.

Direkte Zuweisungssyntax:

this.setState({pictures: pics})

Diese Syntax ist unkompliziert und einfach zu verwenden. Der vorhandene Statuswert wird direkt durch den neuen bereitgestellten Wert ersetzt. Dies kann jedoch zu potenziellen Problemen führen, wenn der Statuswert an mehreren Stellen verwendet oder innerhalb der Lebenszyklusmethoden der Komponente manipuliert wird.

Functional Updater Syntax:

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

Die funktionale Updater-Syntax wird bevorzugt, da sie sicherstellt, dass die Statusaktualisierung konsistent und vorhersehbar ist. Es übernimmt den vorherigen Status als Argument und gibt den aktualisierten Status zurück. Dies verhindert versehentliche Zustandsänderungen und stellt sicher, dass der Zustand immer auf dem neuesten Stand ist.

Zusammenführen und Stapeln

React führt intern mehrere setState-Aufrufe zu einem einzigen Update zusammen. Die Direktzuweisungssyntax ist anfällig für Zusammenführungsprobleme, wenn mehrere Aufrufe versuchen, denselben Statusschlüssel zu aktualisieren. Zum Beispiel:

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

Die Syntax des funktionalen Updaters führt die Aktualisierungen automatisch korrekt zusammen, sodass der endgültige Status sowohl pics1 als auch pics2 widerspiegelt.

Leistung und Effizienz

Reagieren Sie aus Leistungsgründen auf setState-Aufrufe. Durch die Zusammenführung mehrerer Updates zu einem kann React Komponentenaktualisierungen optimieren und unnötige Neu-Renderings reduzieren. Die funktionale Updater-Syntax unterstützt die Stapelverarbeitung, indem sie ermöglicht, dass Aktualisierungen vom vorherigen Status abhängen.

Schlussfolgerung

Während beide Syntaxen zum Aktualisieren des Status verwendet werden können, ist dies bei der funktionalen Updater-Syntax der Fall Aufgrund seiner Konsistenz, Sicherheit, Zusammenführungsfunktionen und Unterstützung für Leistungsoptimierungen wird es allgemein empfohlen. Durch die Verwendung der funktionalen Updater-Syntax können Entwickler Statusmutationsprobleme vermeiden und sicherstellen, dass ihre Komponenten korrekt und effizient aktualisiert werden.