javascript - instalar - react logo

setState vs replaceState en React.js

Question

Soy nuevo en la Biblioteca React.js y estaba repasando algunos de los tutoriales y me encontré con:

• this.setState
• this.replaceState

La descripción dada no es muy clara (IMO).

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

Similar,

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

Intenté this.setState({data: someArray}); seguido de this.replaceState({test: someArray}); y luego console.logged ellos y encontré ese state ahora tenía data y test .

Entonces, probé this.setState({data: someArray}); seguido de this.setState({test: someArray}); y luego console.logged ellos y encontré ese state nuevamente tenía data y test .

Entonces, ¿cuál es exactamente la diferencia entre los dos?

Answer 1

Con setState los estados actuales y anteriores se fusionan. Con replaceState , arroja el estado actual y lo reemplaza con solo lo que usted proporciona. Usualmente se usa setState menos que realmente necesite eliminar claves por alguna razón; pero establecerlos en falso / nulo suele ser una táctica más explícita.

Si bien es posible, podría cambiar; replaceState actualmente usa el objeto pasado como estado, es decir, replaceState(x) , y una vez configurado this.state === x . Esto es un poco más ligero que setState , por lo que podría usarse como una optimización si miles de componentes establecen sus estados con frecuencia.
_{Afirmé esto con este caso de prueba .}

Si su estado actual es {a: 1} y llama a this.setState({b: 2}) ; cuando se aplica el estado, será {a: 1, b: 2} . Si this.replaceState({b: 2}) tu estado sería {b: 2} .

Nota al this.setState({b: 1}); console.log(this.state) : el estado no se establece al instante, por lo tanto, no haga esto. this.setState({b: 1}); console.log(this.state) this.setState({b: 1}); console.log(this.state) cuando se prueba.

Answer 2

Definición por ejemplo:

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

Sin embargo, tome nota de esto de los docs :

setState () no cambia inmediatamente this.state sino que crea una transición de estado pendiente. El acceso a this.state después de llamar a este método puede devolver el valor existente.

Lo mismo ocurre con replaceState()

Answer 3

Según los docs , replaceState podría quedar obsoleto:

Este método no está disponible en los componentes de clase ES6 que extienden React.Component. Se puede eliminar por completo en una versión futura de React.