Eventos del ciclo de vida de React

 

 

 

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

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

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

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

 

Aquí veremos qué gancho es mejor para qué funcionalidad.

En primer lugar, hay 3 fases en el ciclo de vida de un componente React:

  • Montaje
  • Actualizando
  • Desmontaje

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

Montaje

Al montar, tiene 4 métodos de ciclo de vida antes de que el componente se monte en el DOM: constructor, getDerivedStateFromProps, rendery componentDidMount.

Constructor

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

Generalmente se utiliza el constructor para configurar el estado inicial usando this.state = ....

obtenerDerivedStateFromProps()

Cuando el estado depende de propiedades, getDerivedStateFromPropsse puede usar para actualizar el estado en función del valor de las propiedades.

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

En este método no tienes acceso thisya 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 el mismo resultado 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)

prestar()

Desde el método render() se 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 el mismo resultado cuando se llama varias veces con la misma entrada.

componenteDidMount()

Este método es el que utilizarás para realizar llamadas 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: getDerivedStateFromProps, shouldComponentUpdate, y .rendergetSnapshotBeforeUpdatecomponentDidUpdate Fotos Porno y actrices porno

obtenerDerivedStateFromProps()

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

deberíaComponentUpdate()

Este método devuelve un valor booleano trueo false. Este método se utiliza para indicar a React si debe continuar con la nueva representación y el valor predeterminado es true. Se devolverá falsecuando la nueva representación sea costosa y se desee tener más control sobre cuándo sucede esto.

prestar()

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

Obtener instantánea antes de actualizar ()

En este método tienes acceso a las propiedades y al estado del render anterior y del render actual.

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

componenteDidUpdate()

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

Corresponde al componentDidMount()método de la fase de montaje.

Desmontaje

En esta fase sólo tenemos un método, componentWillUnmount.

componenteWillUnmount()

El método se llama cuando se elimina el componente del DOM. Úselo para realizar cualquier tipo de limpieza que necesite.

Legado

Si está trabajando en una aplicación que usa componentWillMount, componentWillReceivePropso componentWillUpdate, estos quedaron obsoletos en React 16.3 y debería migrar a otros métodos de ciclo de vida.




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Eventos del ciclo de vida de React

Eventos del ciclo de vida de React

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

programar

es

https://aprendeprogramando.es/static/images/programar-eventos-del-ciclo-de-vida-de-react-1862-0.jpg

2024-10-29

 

Eventos del ciclo de vida de React
Eventos del ciclo de vida de React

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences