Una introducción rápida a setState en React.js

Cómo utilizar setState de forma eficaz y qué errores evitar

TL; DR - En caso de que sea un aprendiz visual, diríjase al video que hice: ReactJS - Cómo funciona setState

O míralo aquí:

Una introducción a setState

Lo primero que debe tener en cuenta es el hecho de que la función setState en React funciona de forma asincrónica. Eso podría hacer tropezar a algunos desarrolladores, ya que los valores de estado no están disponibles inmediatamente después de la actualización.

Hay dos variaciones del uso de setState: el enfoque basado en objetos y el enfoque funcional.

Veamos ambos en acción. Llegaremos a comprender el problema con setState basado en objetos en el proceso.

Creemos una aplicación sencilla.

class App extends React.Component { constructor() { super(); this.state = { value: 0, message: 'default click state' } } onClick = () => { this.setState({ value: this.state.value + 1 }); this.setState({ message: `click-state ${this.state.value}` }); } render(){ return( render->state={this.state.value} - {this.state.message} Click-setState ); }}

Ahora montaremos esta aplicación en nuestro nodo DOM raíz.

ReactDOM.render( , document.getElementById("root"));

El código anterior, cuando se ejecuta, muestra el valor y el mensaje del objeto de estado y también muestra un botón.

Si echas un vistazo al controlador de clic, tenemos dos funciones setState consecutivas que acceden al valor this.state.

El comportamiento que esperamos es que cuando se hace clic en el botón, se debe representar el valor de estado correcto en el div a continuación (extraído como referencia):

 render->state={this.state.value} - {this.state.message} 

El this.state.messagecontiene valores dethis.state.value

Esperamos que ambos valores de estado sean los mismos cuando se hace clic en el botón.

Veamos el resultado de esto.

La salida inicial se muestra a continuación, ya que el valor es 0 para empezar.

Después del primer clic, esperamos el siguiente resultado:

render->state=1 -click-state 1

pero obtenemos esto en su lugar:

En el segundo clic, la salida aún no coincide como se muestra a continuación.

A estas alturas, es posible que esté durmiendo o rascándose la cabeza :)

La función onClick ()

Así que echemos un vistazo a la función onClick () para comprender el problema.

Dado que la llamada setState es asincrónica antes de que se pueda completar la primera ejecución setState, la referencia al segundo setState puede apuntar al valor anterior y no al primer valor actualizado actual.

Arreglaremos esto usando el aspecto funcional de setState.

Para demostrar la solución, creemos un botón más:

Click-setState fn

Y agregue un nuevo controlador de clic enClickfn () como se muestra a continuación

El método anterior usa el parámetro funcional en setState.

Esta puede ser una función de flecha como se muestra arriba o la función normal de ES5.

Esta función toma dos parámetros como argumentos: el primero es prevState y el segundo son los accesorios (en caso de que también necesite accesorios, que se pasan del componente principal). Aquí solo estamos mirando en prevState.

El anterior estado anterior se relaciona con la función setState ya que es el último estado actualizado. Esto siempre apuntará al valor correcto.

Veamos el resultado después de un par de clics. Verá que los valores siempre están sincronizados cuando hace clic en el segundo botón.

En el ejemplo anterior, puede ver que el uso del parámetro funcional setState procesa correctamente el estado anterior y obtiene valores de estado predecibles.

Una advertencia más que debemos tener en cuenta: setState () toma una función de devolución de llamada más, que se ejecuta una vez que los valores de estado se actualizan correctamente.

Esto es muy útil en una situación en la que tiene que realizar alguna operación una vez que setState se actualiza correctamente.

Veamos un ejemplo final.

Supongamos que queremos registrar el valor del estado después de la actualización y escribimos el código como se muestra a continuación. Usaré el controlador onClickfn () para esto.

Pero veamos console.logy verifiquemos si el valor es correcto o no. Después de tres clics, obtiene este estado:

Observará que el valor registrado no es el último valor actualizado. Arreglemos esto y veamos el resultado.

En el ejemplo anterior, estamos usando el segundo parámetro de devolución de llamada setState (). Esta devolución de llamada se ejecutará una vez que setState () haya completado su operación.

Veamos el resultado final con el código modificado anterior.

Terminando

Espero que este pequeño artículo aclare algunos conceptos erróneos sobre setState.

El código fuente completo está disponible en jsbin.

¡Feliz codificación!

Aprende conmigo @Learner + Fullstack Coach (@rajeshpillai): //twitter.com/rajeshpillai

Promotion: Special $10 coupon for medium readers for my upcoming live ReactJS-Beyond the basics course on udemy in case you wish to support our open source curriculum Mastering frontend engineering in 12 to 20 weeks