it-swarm.com.de

setState vs replaceState in React.js

Ich bin neu in React.js Library und habe einige der Tutorials durchgesehen. Dabei bin ich auf Folgendes gestoßen:

  • this.setState
  • this.replaceState

Die Beschreibung ist nicht sehr klar (IMO).

setState is done to 'set' the state of a value, even if its already set 
in the 'getInitialState' function.

Ähnlich,

The replaceState() method is for when you want to clear out the values 
already in state, and add new ones.

Ich habe versucht, this.setState({data: someArray}); gefolgt von this.replaceState({test: someArray}); und dann console.logged sie und ich fand, dass state jetzt hatte sowohl data als auch test.

Dann habe ich versucht this.setState({data: someArray}); gefolgt von this.setState({test: someArray}); und dann console.logged sie und ich fand, dass state hatte wieder beide data und test.

Was genau ist der Unterschied zwischen den beiden?

93
myusuf

Mit setState werden der aktuelle und der vorherige Zustand zusammengeführt. Mit replaceState wird der aktuelle Status verworfen und nur durch das ersetzt, was Sie angeben. Normalerweise wird setState verwendet, es sei denn, Sie müssen aus irgendeinem Grund wirklich Schlüssel entfernen. Aber sie auf false/null zu setzen, ist normalerweise eine explizitere Taktik.

Während es möglich ist, könnte es sich ändern; replaceState verwendet derzeit das Objekt, das als Status übergeben wurde, d. h. replaceState(x), und sobald es festgelegt ist this.state === x. Dies ist ein wenig leichter als setState, sodass es als Optimierung verwendet werden kann, wenn Tausende von Komponenten häufig ihren Status festlegen.
Ich habe dies mit dieser Testfall behauptet.


Wenn Ihr aktueller Status {a: 1} Ist und Sie this.setState({b: 2}) aufrufen; Wenn der Status angewendet wird, ist er {a: 1, b: 2}. Wenn Sie this.replaceState({b: 2}) aufgerufen hätten, wäre Ihr Status {b: 2}.

Randnotiz: Der Status wird nicht sofort festgelegt, tun Sie also beim Testen nicht this.setState({b: 1}); console.log(this.state).

136
Brigand

Definition am Beispiel:

// let's say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

Beachten Sie dies jedoch in docs :

setState () mutiert this.state nicht sofort, sondern erstellt einen ausstehenden Statusübergang. Wenn Sie nach dem Aufrufen dieser Methode auf this.state zugreifen, wird möglicherweise der vorhandene Wert zurückgegeben.

Gleiches gilt für replaceState()

44
Grav

Laut docs kann replaceState veraltet sein:

Diese Methode ist für ES6-Klassenkomponenten, die React.Component erweitern, nicht verfügbar. In einer zukünftigen Version von React wird es möglicherweise vollständig entfernt.

13
Liran Brimer