State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js

Inicioreact jsState y Ciclo de vida en React
State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js

by Juan Carlos García

3-Mzo-2023

(4)

Suscribirme al canal:

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.

¡No te puedes perder las nuevas clases 🧐!

React JS

React JS

React.js: El mejor curso gratuito de React.js desde cero.

¿Que es React JSX?

¿Que es React JSX?

Guía para principiantes de React JSX: ¿Qué es React JSX? Introducción a React JSX

Componentes y propiedades

Componentes y propiedades

Components and Props React.js, Manejo de propiedades y componentes en React

State y Ciclo de vida en React

State y Ciclo de vida en React

State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js

Refs React

Refs React

¿Qué son las React Refs y para que sirven? Uso de las Refs y manejo del DOM en React.js

Listas y condiciones en React

Listas y condiciones en React

Keys and List: ¿Cómo manejar las listas y condicionales en React JS?

Formularios en React

Formularios en React

Formularios en React: ¿Cómo manejar los formularios en React.js con input controlados y no controlados?

React develepor tools

React develepor tools

React Developer Tools: ¿Cómo analizar el comportamiento y estado de nuestros componentes en React.js?

API Context

API Context

API Context en React: ¿Cómo comunicar componentes mediante API Context en React.js?

Higher Order Component

Higher Order Component

HOC en React.js: ¿Cómo utilizar los High Order Component (HOC) ?

Children en React JS

Children en React JS

Children en React.js: Manejo avanzado de Children en React.js, composición de componentes.

PropTypes en React

PropTypes en React

PropType en React.js: ¿Cómo validar datos a través de PropType en React.js?

Hooks en React JS

Hooks en React JS

Master de Hooks en React JS: ¿Qué es un Hook en React.js? Tipos, funcionamiento y características.

Hook useState

Hook useState

useState: ¿Cómo utilizar el Hook useState en React.js?

Hook useEffect

Hook useEffect

Hook useEffect: ¿Qué es el Hook useEffect? ¿Cómo utilizarlo correctamente y qué reglas seguir?

Hook useContext

Hook useContext

¿Cómo utilizar el Hook useContext? Comunicación de componentes funcionales

Hook useReducer

Hook useReducer

¿Cómo utilizar el Hook useReducer en React.js?

React memo

React memo

Memorizar componentes a través de React.memo en React.js

Hook useCallback

Hook useCallback

Utilizando los Hooks useCallback y useMemo en React.js

🧐 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?

¿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.

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.

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.

🧐 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

Juan Carlos García

Desarrollador de software / SEO

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.

EWebik

Diseño de páginas web y aplicaciones moviles.

© 2024 EWebik