Reaccionar: comprender el estado y el ciclo de vida | React

En este artículo, veremos cómo funcionan State & Lifecycle en React. Este conocimiento es realmente poderoso, ya que nos ayuda a separar las preocupaciones, agregar dinamismo y construir componentes verdaderamente reutilizables.

Este artículo es parte de una serie que estoy escribiendo sobre el aprendizaje de los fundamentos de React. ¡Asegúrese de seguirme si desea realizar un seguimiento!

¿Qué es el estado?

El estado se usa con las clases de componentes React para hacerlas dinámicas. Permite que el componente realice un seguimiento de la información cambiante entre los renders. Más específicamente, el estado de un componente es un objeto que contiene información que puede cambiar durante la vida útil del componente.

Estado v Props

¿Se preguntarán en qué se diferencia esto de los accesorios? Nos fijamos en los apoyos en mi artículo anterior: Reaccionar: Componentes y apoyos . Recuerde que los accesorios son un objeto que contiene información para controlar el comportamiento de un componente. Esto suena muy similar al estado, pero veamos cómo difieren:

• Los accesorios son inmutables. Una vez establecidos, no se pueden cambiar
• El estado es observable. Puede contener datos que pueden cambiar con el tiempo.
• Los accesorios se pueden usar en componentes de función o clase
• El estado está limitado a los componentes de la clase.
• Los accesorios son establecidos por el componente padre
• Los controladores de eventos actualizan el estado

Usando estado

Cuando se usa State, necesitamos que el estado de un componente siempre exista, por lo que debemos establecer un estado inicial. Podemos hacerlo definiendo nuestro estado en el constructor de nuestra clase de componente, así:

clase MyClass extiende React.Component { 
  constructor (props) { 
    super (props); 
    this .state = {atributo: "valor"  }; 
  } 
} 

Nota: Examinaremos este código en detalle más adelante en este artículo, bajo métodos de ciclo de vida. ¡Por ahora es bueno saber cómo presentamos el estado!

Estado de actualización

Lo siguiente que debe saber sobre el estado es que nunca debe actualizarse explícitamente . React utilizará un objeto observable para el estado, que permite que el componente se comporte en consecuencia.

Si, por ejemplo, debemos actualizar el estado de los componentes de esta manera:

this.state.attribute = "valor cambiado";

¡Tendríamos un error de renderizado! Como estado no sería capaz de detectar los cambios.

setState ()

Es por eso que utilizamos el método incorporado React de setState(). Toma un solo parámetro y espera que se actualice un objeto que contiene nuestro conjunto de valores.

El método actualizará nuestro estado y luego llamará al render()método para volver a representar la página. Por lo tanto, la forma correcta de actualizar nuestro estado es así:

this.setState ({atributo: "valor-cambiado"});

Recuerde que solo se nos permite definir nuestro estado explícitamente en el constructor, cuando proporcionamos el estado inicial.

Establecer múltiples estados

También podemos aprovechar las habilidades asincrónicas de React configurando múltiples estados, en un solo setState()método. Un caso de uso para esto podría ser cuando queremos mantener un recuento (por ejemplo, seguimiento de me gusta de una publicación o foto).

Podríamos hacer esto usando una función de flecha ES6, así:

this.setState ((prevState, props) => ({ 
  total: prevState.count + props.diff 
}));

Aquí estamos tomando nuestro estado de componentes y accesorios anteriores, como parámetro, y luego estamos actualizando el total. Lo mismo también podría escribirse como una función regular así:

this.setState (function (prevState, props) { 
  return {total: prevState.count + props.diff}; 
});

Ciclo vital

En la siguiente sección, veremos el ciclo de vida de React. Comencemos con una definición.

¿Qué es el ciclo de vida?

En general, podríamos definir un ciclo de vida como nacimiento, crecimiento y muerte. Y nuestros componentes React también siguen este ciclo: se crean (montados en el DOM), experimentan crecimiento (mediante la actualización) y mueren (desmontados del DOM). ¡Este es el ciclo de vida del componente!

Dentro del ciclo de vida de un componente, hay diferentes fases. Estas fases tienen sus propios métodos de ciclo de vida. Veamos ahora estos métodos.

Los métodos del ciclo de vida

El ciclo de vida de un componente se puede dividir en cuatro partes:

• Inicialización
• Montaje
• Actualización
• Desmontaje

Veamos cada uno en detalle.

Inicialización

En esta fase, nuestro componente establecerá su estado y accesorios. Esto generalmente se hace dentro de un método de constructor, así:

clase Initialize extiende React.Component { 
  constructor (props) {     // llamando al constructor de su 
    super padre (props);     // proceso de inicialización 
    this.state = { 
      time: new  Date (), 
      selectedStatus: false 
    }; 
  } 
}

Montaje

Una vez que se completa la fase de inicialización, entramos en la fase de montaje. Esto es cuando nuestro componente React "se monta" en el DOM (se crea e inserta en el DOM). Esto es cuando nuestro componente se procesa por primera vez. Los métodos disponibles en esta fase son componentWillMount()y componentDidMount().

componentWillMount ()

Este método se llama justo antes del montaje de componentes en el DOM (o cuando se llama al método de renderizado). Entonces nuestro componente se monta.

componentDidMount ()

Este método se llama después de que el componente se monte en el DOM. Al igual componentWillMount(), se llama solo una vez en un ciclo de vida. Antes de su ejecución, se llama al método de representación. Podemos hacer llamadas a la API y actualizar el estado con la respuesta de la API.

Veamos estos métodos en acción con un ejemplo:

class LifeCycle extiende React.Component { 
  componentWillMount () { 
      console.log ('Component will mount!') 
   } 
  componentDidMount () { 
      console.log ('Component did mount!') 
      this.getData (); 
  } 
  getData = () => { 
   / * método para hacer una llamada API para datos * / 
  } render () { 
      return ( 
         <div> 
            <h1> ¡Métodos de montaje en acción! </h1> 
         </div> 
      ); 
   } 
}

Actualización

Después de la fase de montaje donde se crea nuestro componente, entramos en la fase de actualización. Aquí es donde cambia el estado del componente y, por lo tanto, se realiza la representación.

Los datos del componente (su estado y accesorios) se actualizarán en respuesta a eventos del usuario, como hacer clic, escribir, etc. Esto da como resultado la representación del componente. Los métodos que utilizamos aquí son:

shouldComponentUpdate ()

Este método determina si el componente debe actualizarse o no. Por defecto, devolverá verdadero. Si en algún momento, si desea volver a representar el componente en una condición, el shouldComponentUpdate()método sería la opción correcta.

Si, por ejemplo, solo desea volver a renderizar su componente cuando hay un cambio en la utilería, esto sería cuando usa este método. Recibe argumentos como nextProps y nextState que nos ayudan a decidir si volver a renderizar haciendo una comparación con el valor actual de prop.

componentWillUpdate ()

Llamamos a este método antes de volver a representar nuestro componente. Se llama una vez después. shouldComponentUpdate().Si desea realizar un cálculo antes de volver a representar el componente y después de actualizar el estado y la utilería, entonces usaría este método. Al igual que shouldComponentUpdate(), también recibe argumentos como nextProps y nextState .

componentDidUpdate ()

Llamamos a este método después de volver a representar nuestro componente. Después de que el componente actualizado se actualiza en el DOM, el componentDidUpdate()método se ejecuta. Este método recibirá argumentos como prevProps y prevState .

Vamos a ampliar nuestro ejemplo anterior:

clase LifeCycle extiende React.Component { 
  constructor (props) { 
    super (props); 
    this.state = { 
      time: new  Date (), 
      selectedStatus: false, 
      list: [] 
    }; 
  }   componentWillMount () { 
    console.log ('Component will mount!') 
  } 
  componentDidMount () { 
    console.log ('Component did mount!') 
    this.getList (); 
  }   getList = () => { 
    / * método para hacer una llamada API para datos * / 
    fetch (' https://api.mydomain.com ') 
      .then (response => response.json ()) 
      .then (data => this.setState ({list: data})); 
  }  shouldComponentUpdate (nextProps, nextState) { 
    return this.state.list! == nextState.list 
  } 
  componentWillUpdate (nextProps, nextState) { 
    console.log ('¡El componente se actualizará!'); 
  } 
  componentDidUpdate (prevProps, prevState) { 
    console.log ('¡El componente se actualizó!') 
  } render () { 
   return ( 
     <div> 
       <h1> ¡Métodos de montaje en acción! </h1> 
     </div> 
   ); 
} 
}

Desmontaje

La última fase es desmontable. Donde nuestro componente se desmonta del DOM. El método que podemos usar aquí es:

componentWillUnmount ()

Llamamos a este método antes de que tenga lugar el desmontaje. Antes de la eliminación del componente del DOM, componentWillUnMount()se ejecutará. ¡Este método es el final del ciclo de vida del componente!

A continuación se muestra un diagrama de flujo que muestra todos los métodos del ciclo de vida:

Conclusión

¡Y eso es! Hemos cubierto algunos conceptos importantes que son fundamentales para React. Primero observamos el estado, comparamos el estado con los accesorios y observamos cómo actualizar y establecer múltiples estados. Luego pasamos al ciclo de vida del componente React, que abarca las fases (inicialización, montaje, actualización y desmontaje) y los métodos disponibles para cada uno.

¡Espero que hayas encontrado útil este artículo! Puedes seguirme en Medium. También estoy en Twitter . Siéntase libre de dejar cualquier pregunta en los comentarios a continuación. Estaré encantado de ayudar!