Es absolutamente imposible hablar sobre los conceptos básicos de React y no hablar sobre los Estados.
Creo que estarás de acuerdo cuando digo que las props de React son una característica muy importante e interesante del “framework”. De hecho dijimos que eran la “piedra angular”.
Lo que pasa es que en una obra de arquitectura, una vez hayas resuelto el problema de la piedra angular, muy rápidamente te das cuenta de que necesitas algo más. En Ract este algo más tiene necesariamente que ver con los states, o estados en castellano. Sobretodo porque sin states, tus componentes de React son simples plantillas. ¿Estás de acuerdo?
¿Qué son los estados?
Los estados son el “corazón” de los componentes de React. Son aquella característica que te permitirá desarrollar aplicaciones mucho más interesantes.
Un estado en React es, entonces, un almacén de datos mutable de componentes y que además son autónomos. O sea, el estado pertenece una clase autónoma que cualquiera pueda importar y usar en su aplicación.
¿Qué hay en común entre propiedades y estados? ¿En qué son diferentes?
Las propiedades y los estados son ambos atributos de una clase, por eso puedes utilizar this.state y/o this.pros, pero tienen propósitos diferentes: mientras las propiedades son inmutables, los valores de los estados pueden cambiar. Son mutables.
Entonces tenemos que, por un lado los estados actúan en el contexto del componente y por otro, las propiedades crean una instancia del componente cuando le pasas un nuevo valor desde un componente padre.
Los valores de las propiedades los pasas de padres a hijos y los valores de los estados los defines en el componente, no se inician en el componente padre, y ni puedes llamar setState() en el render(). Creo que ya has entendido porqué. Si no lo verás rápidamente.
¿En qué situación puedo utilizar los estados?
En el artículo pasado vimos que gracias as las propiedades podrías tener diferentes vistas cambiado las propiedades. El problema es que las propiedades son inmutables en el componente actual.
La típica utilización de los estados sería en tu componente de reloj, en que necesitas actualizar periódicamente la vista con los segundos.
Pero también podrías utilizar los estados en otras situaciones en que necesites hacer una petición al servidor para ir a buscar la información que quieres ver por pantalla, pero no quieres que se actualicen otras partes de tu UI. ¿Cómo hacerlo sin recrear el componente?
Utilizando los estados, React actualiza por ti la vista de forma inteligente, donde hay que actualizar.
¿Cómo acceder a los estados y a los valores?
Para acceder al estado, debes hacerlo por el nombre del estado, que es una propiedad de objeto del objeto this.state. Algo muy parecido a como hacías con las propiedades.
¿Un ejemplo?
this.state.valorCampo (en las propiedades harías this.props.varlorCampo)
¿Cómo establezco los valores iniciales?
Como hemos visto anteriormente, para iniciar el estado, lo haces mediante this.state y este debe ser ser un objeto que está en el constructor(). Además, es importante invocar a super() con las props. Si no, no funciona la lógica en el padre. Es una forma de asegurar que el constructor() del padre se ejecute.
¿Un ejemplo?
constructor(props){
super(props)
this.state = {horaActual: (new date()).toLocaleString()}
}
¿Cómo actualizo los estados?
Actualizar los estados es tan sencillo como declarar this.setState(data, callback). Solamente debes recordar que React fusiona los datos con los estados existentes y posteriormente llama el render().
Además, hay que tener en cuenta que setState() funciona de forma asíncrona - this.state no está inmediatamente disponible después de llamar setState(),- por eso es importante tener el callback en el setState(). Es una forma de asegurar que el nuevo estado está disponible.
Por cierto, cambiar el estado sin utilizar setState() está considerado antipatrón.
¿Otro ejemplo más?
setInterval(()=>{
console.log(‘actualiza el tiempo’)
this.setState({
horaActual: (new Date()).toLocaleString()
})
},100)
¿Qué más debería saber?
setState() actualiza solamente el estado que quieres. No siempre actualiza todo el objeto. Por ejemplo, si en un objeto tienes diferentes estados, como el nombre, apellido, edad y solamente quieres actualizar la edad, lo único que tienes que hacer es algo como this.setState({edad:24}); Los demás valores quedarán igual.
¿Debo utilizar siempre los estados?
Te he hecho leer todo esto para llegar hasta aquí y decirte que no. Y hay más aún; suena contradictorio, pero según lo que he leído, lo ideal, la forma preferida en React es utilizar lo máximo posible componentes sin estados.
¿Y eso? :-/
Pues, los componentes sin estados son más predecibles y más “declarativos”. Seguro que tendrás una aplicación con muchos componentes. Esto te permite mayor flexibilidad y mejor diseño. ¿Estás de acuerdo?
Conclusión
Los estados son aquella característica que permite que tus aplicaciones sean interactivas y tengan información dinámica. Al mismo tiempo son útiles cuando necesitas ver los cambios en la respuesta del servidor a alguna petición.
Respetes o no la buena práctica de tener componentes stateless, sin estados, ni métodos, es altamente probable que utilizarás los estados de manera regular en tus aplicaciones React. No es por tanto mala idea mantener el ojo en la documentación oficial sobre este tema y consultarla siempre que sea necesario.
¿Crees que es realmente ventajoso utilizar componentes stateless?
Fuentes:
- Mardan, Azat., (2017), React Quickly, Shelter Island, NY 11964, USA: Manning.
- State and Lifecycle
- React State From the Ground Up
- props vs state
