Reaccionar eventos del ciclo de vida

Descubra los eventos del ciclo de vida de React y cómo puede utilizarlos

Los componentes de la clase React pueden tener enlaces para varios eventos del ciclo de vida.

Los ganchos permiten que los componentes de funciones también accedan a ellos, de una manera diferente.

Durante la vida útil de un componente, hay una serie de eventos que se llaman, y para cada evento puede conectar y proporcionar una funcionalidad personalizada.

Qué gancho es mejor para qué funcionalidad es algo que veremos aquí.

Primero, hay 3 fases en el ciclo de vida de un componente de React:

  • Montaje
  • Actualizando
  • Desmontaje

Veamos esas 3 fases en detalle y los métodos que se llaman para cada una.

Montaje

Al realizar el montaje, tiene 4 métodos de ciclo de vida antes de que el componente se monte en el DOM: elconstructor,getDerivedStateFromProps,renderycomponentDidMount.

Constructor

El constructor es el primer método que se llama al montar un componente.

Por lo general, usa el constructor para configurar el estado inicial usandothis.state = ....

getDerivedStateFromProps ()

Cuando el estado depende de la utilería,getDerivedStateFromPropsse puede utilizar para actualizar el estado en función del valor de los accesorios.

Se agregó en React 16.3, con el objetivo de reemplazar elcomponentWillReceivePropsmétodo obsoleto.

En este método no tienes acceso athisya que es un método estático.

Es un método puro, por lo que no debería causar efectos secundarios y debería devolver la misma salida cuando se llama varias veces con la misma entrada.

Devuelve un objeto con los elementos actualizados del estado (o nulo si el estado no cambia)

hacer()

Desde el método render () devuelve el JSX que construye la interfaz del componente.

Es un método puro, por lo que no debería causar efectos secundarios y debería devolver la misma salida cuando se llama varias veces con la misma entrada.

componenteDidMount ()

Este método es el que utilizará para realizar llamadas a la API o procesar operaciones en el DOM.

Actualizando

Al actualizar, tiene 5 métodos de ciclo de vida antes de que el componente se monte en el DOM: elgetDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdateycomponentDidUpdate.

getDerivedStateFromProps ()

Consulte la descripción anterior para este método.

shouldComponentUpdate ()

Este método devuelve un booleano,trueofalse. Utiliza este método para decirle a React si debe continuar con la renderización, y por defecto estrue. Regresarásfalsecuando la devolución es costosa y desea tener más control sobre cuándo sucede esto.

hacer()

Consulte la descripción anterior para este método.

getSnapshotBeforeUpdate ()

En este método, tiene acceso a los accesorios y el estado del renderizado anterior y del renderizado actual.

Sus casos de uso son muy específicos y probablemente sea el que usará menos.

componenteDidUpdate ()

Este método se llama cuando el componente se ha actualizado en el DOM. Use esto para ejecutar cualquier API DOM de terceros o llamar a API que se deben actualizar cuando cambia el DOM.

Corresponde a lacomponentDidMount()método desde la fase de montaje.

Desmontaje

En esta fase solo tenemos un método,componentWillUnmount.

componenteWillUnmount ()

Se llama al método cuando el componente se elimina del DOM. Use esto para hacer cualquier tipo de limpieza que necesite realizar.

Legado

Si está trabajando en una aplicación que usacomponentWillMount,componentWillReceivePropsocomponentWillUpdate, esos quedaron obsoletos en React 16.3 y debe migrar a otros métodos de ciclo de vida.

Descarga mi gratisReact Handbook


Más tutoriales de react: