State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js
Continuando con nuestro Tutorial Gratuito de React JS, hoy quiero platicarte de un concepto que es vital en el aprendizaje de React, y me refiero al uso del State y Ciclo de vida de los componentes (State And Lifecycle), si comprendes estos conceptos podrás crear potentes componentes con un código limpio y fácil de mantener.
- Te dejo la clase anterior, Componentes y propiedades React JS ya que es importante hayas terminado de ver este vídeo para que comprendas este post a la perfección.
¡No te puedes perder las nuevas clases 🧐!
Suscribirme
by Juan Carlos García
3-Mzo-2023
(4)
Suscribirme al canal:
Tabla de contenido
- 1 ¿Qué aprenderás?
- 2 ¿Qué es el State en React JS?
- 3 ¿Para qué utilizamos el State en React?
- 4 Características del State en React
- 5 ¿Cómo podemos implementar el State?
- 6 Uso del State en componentes de clases (class component)
- 7 Uso del State en componentes funcionales (functional component)
- 8 Ciclo de vida en los componentes
¿Qué aprenderás?
- Comprenderás el manejo del state en componentes de clases o class components
- State en componentes funcionales o functional components
- Veremos las características del state y su implementación
- Aprenderás a manipular el estado y el uso de Hook setState, aunque no profundizare en el tema de Hooks, será el primero que veamos.
Repositorio:
- Este capitulo lo puedes descargar clonando el repositorio con la siguiente línea de código.
- Y solo debes cambiarte a la rama de nombre "state-lifecycle"
- Si no estas familiarizado con Git, descarga el código aquí.
- Recuerda que cada capítulo estará en una rama diferente para llevar un orden
git clone https://github.com/EWebik/react-js.git
Como siempre tenemos que definir algunos conceptos para que comprendas que es lo que estas utilizando al desarrollar, iniciamos con el State y vamos avanzando poco a poco.
¿Qué es el State en React JS?
El State en React es un objeto con el que podemos representar el estado actual del componente y si este State cambia, el componente también cambiará en reacción a dicho cambio.
¿Complicado? Pareciera, pero en verdad es algo muy simple de comprender y es la razón del que no mezcle propiedades y estado en el vídeo anterior.
¿Para qué utilizamos el State en React?
En esencia utilizamos el estado para hacer cambios sobre nuestro componente, si recuerdas en la clase anterior, podemos hacer cambios cobre un componente en React al modificar sus propiedades de entrada.
No obstante, si necesitamos hacer cambios desde dentro del componente, no podemos utilizar las propiedades, ya que son de solo lectura.
Aquí es donde entra al juego el estado, ya que, si necesitamos cambiar algo en nuestro componente, ya sea, por un evento, por la variable tiempo, o cualquier otra cosa, podemos utilizar el estado y hacer modificaciones sin que tengamos que modificar sus propiedades.
Bien, creo que te estoy confundiendo ¿Cierto? Recuerda que todo esto lo explico y te muestro un ejemplo en el vídeo, te recomiendo que lo veas y te suscribas a mi canal para darme apoyo, por lo pronto te dejo algunas características que debes recordar.
Características del State en React
Lo importante con lo que te debes de quedar es que:
- El estado puede ser un objeto (Por lo regular es un JSON) o variable.
- Podemos utilizarlo para realizar cambios desde dentro de los componentes.
- Si el estado cambia, los componentes reaccionan a este cambio modificando algo en si mismos, que prácticamente siempre será un cambio en la DOM.
- El estado también puede ser modificado desde fuera del componente y dicho componente reaccionará de la misma manera al cambio.
¿Cómo podemos implementar el State?
Bien, el estado lo podemos usar en:
- Componentes funcionales
- Y en componentes de clases
Y aunque los efectos en ambos componentes es el mismo, su uso y sintaxis cambia en cada uno de ellos, veamos unos ejemplos de cada uno.
Uso del State en componentes de clases (class component)
Para acceder y manipular el estado dentro de un componente de clase debemos hacer uso de this, veamos un ejemplo de como podemos inicializar nuestro state.
Suscribirme
Gracias por tu calificación
(4)
Categorías
Inicializando el State en un componente de clase
Tomando el ejemplo que realizamos en el vídeo, podemos declarar el estado de la siguiente forma dentro del constructor de la clase
class Hijo1 extends React.Component{
constructor(props){
super(props);
this.state={
titulo:"Hijo 1",
subtitulo:"Contador",
cuenta:1
}
...
}
}
La segunda manera es declararlo fuera del constructor, cuando haces esta opción te recomiendo usar funciones de flecha, solo recuerda que si no usas create-react-app deberás configurar Babel manualmente.
class Hijo1 extends React.Component{
state={
titulo:"Hijo 1",
subtitulo:"Contador",
cuenta:1
...
}
}
Modificar el State en un componente de clase
La manera correcta de actualizar y manipular el estado en este tipo de componentes es a través de setState, por ejemplo:
class Hijo1 extends React.Component{
...
aumentar=()=>{
this.setState({
...this.state,
cuenta:this.state.cuenta + 1
});
}
...
}
En el vídeo implementamos el método aumentar, el cual incrementa la cuenta en el estado cada vez que el usuario da clic.
Uso del State en componentes funcionales (functional component)
Para el manejo del State en componentes funcionales introduciremos algunos conceptos como los son los Hooks, no profundizare en este tema solo utilizaré el que corresponde al estado, en otra clase hablare de este tema en particular.
Inicializando el State en un componente funcional
Tomando el código que vimos en el vídeo te dejo el siguiente ejemplo, recuerda que debes ver el vídeo y descargar el código para que comprendas correctamente este post.
function Hijo2 (props){
//Inicializando el State con useState
const [state, setState] = useState({
titulo:"Hijo 2",
subtitulo:"Contador",
cuenta:1
});
...
}
Viendo el código anterior, observamos:
- Con useState, creamos un state en un componente funcional
- state, almacena el estado
- Con setState podemos modificar el estado
En este punto tanto state como setSate puedes nombrarlos como tu desees.
Modificar el State en un componente funcional
Para modificar el estado solo debemos usar la función que declaramos en el código anterior setSate
const aumentar = ()=>{
setState({
...state,
cuenta:state.cuenta + 1
});
}
Recuerda que en este tipo de componente no existe this.
Ciclo de vida en los componentes
Este es un tema muy importante, ya que en muchas aplicaciones necesitarás hacer uso de los llamados Métodos de ciclo de vida:
- componentDidMount
- componentWillUnmount
Estos métodos nos permiten lanzar una acción al momento en que se monta un componente y otra acción cuando se desmonta.
Suscribirme
Gracias por tu calificación
(4)
Categorías
Ejemplo de componentDidMount y componentWillUnmount
class Hijo extends React.Component{
//Si lo declaras de esta forma
//Recomiendo utilizar funciones de flecha
state={
titulo:"Hijo 1",
subtitulo:"Contador",
cuenta:1
}
intervalo = null;
//Inicializa un intervalo después de que el componente es montado
componentDidMount(){
console.log("componentDidMount")
this.intervalo = setInterval(()=>{
this.setState({
cuenta:this.state.cuenta + 1
})
console.log(this.state)
},1000)
}
//Elimina el intervalo cuando el componente es desmontado
componentWillUnmount(){
console.log("componentWillUnmount")
clearInterval(this.intervalo);
}
render(){
return(
<div className="componente">
<h2>{this.state.titulo}</h2>
<p>{this.state.subtitulo}</p>
<p>{this.state.cuenta}</p>
</div>
);
}
}
El código anterior en esencia crea un setInterval durante el montaje del componente y lo elimina cuando el componente es desmontado, con esto no dejas procesos basura que consuman recursos innecesariamente.
En lo personal son los que mas he usado en los proyectos, existen algunos otros métodos como, por ejemplo:
Métodos de ciclo de vida en un componente de clase
Cuando creas un componente de clase y este extiende de React.Component, hereda algunos métodos de ciclo de vida, por ejemplo:
Para el montaje del componente se heredan:
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
Actualización, esto hace referencia a los cambios en el componente, recuerda un cambio puede ser por un cambio de estado o propiedades, durante una actualización, se lanzan algunos métodos en el siguiente orden:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Y durante el Desmontaje del componente se lanza el siguiente método.
- componentWillUnmount()
En el ciclo de vida, existen algunos métodos que nos ayudan con el manejo de errores durante el renderizado:
- static getDerivedStateFromError()
- componentDidCatch()
📌 Nota: Como puedes observar todo lo de ciclo de vida lo hemos referencia a componentes de clases, por el momento te recomiendo que aprendas este concepto de esta manera.
En otros capítulos, veremos aplicados estos conceptos en componentes funcionales, solo que hay algunas cosas que tenemos que revisar primero, para no crear una confusión y se entienda mejor.
Suscribirme
Gracias por tu calificación
(4)
Categorías
🧐 Autoevaluación: State y Ciclo de vida en React
¿Cuál es el ciclo de vida de React?
¿Qué es componentDidMount ()?
¿Cuándo usar componentDidUpdate?
Juan Carlos García
Desarrollador de software
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.