setState vs replaceState in React.js

Question

Sono nuovo di React.js Biblioteca e stavo andando su alcune delle esercitazioni e mi sono imbattuto in:

• this.setState
• this.replaceState

Il La descrizione fornita non è molto chiara (IMO).

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

Analogamente,

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

Ho provato this.setState({data: someArray}); seguita da this.replaceState({test: someArray}); e poi li console.logged e ho trovato che state ora aveva sia data e test.

Poi, ho provato this.setState({data: someArray}); seguito da this.setState({test: someArray}); e poi li console.logged e ho trovato che state ancora una volta ha avuto sia data e test.

Quindi, qual è esattamente la differenza tra i due?

Answer 1

Con setState gli stati attuali e precedenti vengono uniti. Con replaceState, si elimina lo stato corrente e lo si sostituisce solo con ciò che si fornisce. Solitamente viene utilizzato setState a meno che non sia veramente necessario rimuovere le chiavi per qualche motivo; ma impostandoli su false/null di solito è una tattica più esplicita.

Mentre è possibile, potrebbe cambiare; replaceState utilizza attualmente l'oggetto passato come stato, ad esempio replaceState(x) e una volta impostato this.state === x. Questo è un po 'più leggero di setState, quindi potrebbe essere usato come ottimizzazione se migliaia di componenti impostano frequentemente i loro stati.
_{L'ho affermato con this test case.}

---

Se il vostro stato attuale è {a: 1}, e si chiama this.setState({b: 2}); quando viene applicato lo stato, sarà {a: 1, b: 2}. Se hai chiamato this.replaceState({b: 2}) il tuo stato sarebbe {b: 2}.

Nota a margine: lo stato non viene impostato all'istante, quindi non eseguire this.setState({b: 1}); console.log(this.state) durante il test.

Answer 2

Definizioni, ad esempio:

// 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"} 

Annotare questo dal docs, però:

setState() non abbia immediatamente mutare this.state ma crea una transizione di stato sospeso. L'accesso a this.state dopo aver chiamato questo metodo può potenzialmente restituire il valore esistente.

Lo stesso vale per replaceState()

Answer 3

Secondo il docs, replaceState potrebbe ottenere deprecato:

Questo metodo non è disponibile su componenti di classe ES6 che si estendono React.Component. Potrebbe essere rimosso completamente in una versione futura di React.