Ciclo de vida de un componente en React

Ciclo de vida de un componente en React

Ciclo de Vida de un Componente en React

Hola a todos, nuestro equipo de DevSun Europe contin煤a con la serie de art铆culos relacionados con React. En la publicaci贸n que hoy nos ocupa, explicamos los m茅todos que forman parte del ciclo de vida de un componente en React. Estos m茅todos constan de varias etapas que abarcan desde la creaci贸n hasta la destrucci贸n del componente en la interfaz de usuario. Lo que simplifica la realizaci贸n de ajustes y optimizaciones en el procesamiento de datos, entre otras facilidades.

Introducci贸n al ciclo de vida de un componente

Un componente en React presenta un ciclo de vida (lifecycle) que permite controlar variables y ajustar la forma en que se presentan los datos en la interfaz de usuario. Este ciclo de vida est谩 compuesto por una serie de m茅todos que logran monitorizar y controlar la representaci贸n del componente en la aplicaci贸n. Permitiendo a los desarrolladores gran flexibilidad y control absoluto de los componentes. Los m茅todos que integran el ciclo de vida pueden ser clasificados en correspondencia a la manera en que se emplean: para inicializar – m茅todos de montaje (mounting); para actualizar – m茅todos de actualizaci贸n; para eliminar – m茅todo de desmontaje (unmounting). Estos pueden ser sobrescritos seg煤n las necesidades del programador en la construcci贸n de la aplicaci贸n.

tree-of-life
Foto de Dribble por: ZaibSAli

M茅todos de montaje (mounting)

Los m茅todos de montaje, dentro del ciclo de vida de un componente en React, son usados cuando ocurre el proceso de creaci贸n e inserci贸n del componente dentro del DOM. Los m茅todos llamados en esta etapa son: constructor, getDerivedStateFromProps, render, componentDidMount. Tambi茅n es incluido el m茅todo componentWillMount, como podr谩s apreciar en otras publicaciones relacionadas con el tema, sin embargo, es considerado en las nuevas versiones de React como inseguro y se recomienda evitar su uso en nuevos proyectos.

Las funciones del constructor son: la inicializaci贸n del states y vinculaci贸n de los m茅todos a la instancia del componente. (Para conocer m谩s sobre el constructor y su declaraci贸n en una clase ES6 le recomendamos el art铆culo Tipos de Componentes en React).

Por su parte getDerivedStateFromProps existe para casos de uso poco frecuentes en los que el state depende de los cambios en props a lo largo del tiempo. Puede ser 煤til para implementar transiciones en un componente que comparen sus hijos anteriores y siguientes para decidir cu谩l de ellos animar.

El m茅todo componentDidMount es llamado luego que es insertado el componente en el 谩rbol del DOM. Es recomendado utilizarlo para cuando se realizan cargas de datos desde un servidor, creando una instancia de la solicitud de red. En el restablecimiento del dise帽o de la interfaz de usuario o volver a dibujar un canvas. Agregar oyentes de eventos (event listeners). Para actualizar el state en diferentes casos como modales o tooltips, este patr贸n debe usarlo con cautela para evitar problemas en el rendimiento. A continuaci贸n, mostramos un simple ejemplo.

class MiComponente extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productos: null
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        productos: 45
      });
    }, 1800);
  }
  render() {
    return (
      <div>
        <h2>Cantidad de productos: {this.state.productos}</h2>
      </div>
    );
  }
}

M茅todos de actualizaci贸n (updating)

Al cambiar el state o los props de un componente, este necesita representarse nuevamente en la interfaz de usuario. Al producirse este paso, ocurren secuencialmente los siguientes m茅todos: getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate y componentDidUpdate. Adem谩s, re煤ne otros dos m茅todos (componentWillUpdate, componentWillReceiveProps) que al considerarse como inseguros en las nuevas versiones de React se recomienda evitarlos.

Para conocer si la salida de un componente no se ve afectada por los cambios actuales en el state o los props es utilizado el m茅todo shouldComponentUpdate. Este puede tener como par谩metros nextProps y nextState. Por defecto se encuentra configurado para volver a reproducir el componente ante cada cambio ocurrido en el state. Su principal funci贸n consiste en labores de optimizaci贸n en el rendimiento de la aplicaci贸n.

En el caso de la funci贸n getSnapshotBeforeUpdate, tiene como posibles par谩metros prevProps y prevState. Su rol fundamental consiste en tomar alguna informaci贸n del DOM (por ejemplo, la posici贸n del scroll) antes de que otro cambio tenga lugar. Pudiera emplearse el mismo en la implementaci贸n de un chat.

componentDidUpdate es convocado solo despu茅s que las actualizaciones se han producido y el componente ha sido representado. Los par谩metros que expone son prevProps, prevState, snapshot. Es considerado como una oportunidad para manipular el DOM luego que el componente se ha actualizado y para realizar nuevas solicitudes de red en correspondencia a la comparaci贸n entre el prop actual y el anterior.

componentDidUpdate(prevProps) {
  if (this.props.productoID !== prevProps.productoID) {
    this.fetchData(this.props.productoID);
  }
}

M茅todo de desmontaje (unmounting)

En este proceso del ciclo de vida se usa un solo m茅todo componentWillUnmount, el que es invocado antes de que se borre el componente del DOM. Su tarea radica en limpiar residuos del componente como temporizadores inv谩lidos, cancelar solicitudes de red o suscripciones.

Conclusiones

A modo de conclusiones pensamos necesario mostrarles la siguiente imagen resumen realizada por Dan Abramov con las modificaciones ocurridas en el ciclo de vida de un componente a partir de la versi贸n 16 de React.

new-life-cycle
Resumen del nuevo ciclo de vida de un componente en la versi贸n 16 de React.

En pr贸ximos art铆culos nuestro equipo de DevSun Europe seguir谩 profundizando en React, importante biblioteca de JavaScript.


Total de Vistas: 801
Like
Like Love Haha Wow Sad Angry
18

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up