Introducción del ciclo de vida de un componente

Clase 21 de 37 • Curso de React.js 2019

Resumen

Cuando React renderiza los componentes decimos que entran en escena, cuando su estado cambia o recibe unos props diferentes se actualizan y cuando cambiamos de página se dice que se desmontan.

Montaje:

Representa el momento donde se inserta el código del componente en el DOM.
Se llaman tres métodos: constructor, render, componentDidMount.

Actualización:

Ocurre cuando los props o el estado del componente cambian.
Se llaman dos métodos: render, componentDidUpdate.

Desmontaje:

Nos da la oportunidad de hacer limpieza de nuestro componente.
Se llama un método: componentWillUnmount.

David Zabaleta Franco

student•

Un diagrama que resume mas o menos lo que es el ciclo de vida de un componente. ⠀

Wilson Delgado

student•

super aporte

Bernardo Aguayo Ortega

student•

Gracias!!

Octavio Villavicencio Cruz

student•

una referencia con mas explicación del los tres estados de un componente y todo los eventos que estos los componen react_lifecycle_methods

Andrés Campuzano Garzón

student•

Gracias!!

WILLIAM ALEXANDER RODRIGUEZ ARROYO

student•

Muchas gracias por su aporte!

María José Ledesma

student•

Nicolas Esteban Prieto Sarmiento

student•

Willy David Da Conceicao Lozada

student•

que bonitos apuntes 😮

Gustavo Gonzalez

student•

Esta clase merece un premio, sos un genio Richard!!

Bernardo Aguayo Ortega

student•

sin duda! es una curso magistral

Simón Arenas

student•

Cesar Israel Aguilar Carrera

student•

Gracias por este aporte

Patricio Manuel Ugarte

student•

Gran resúmen. Gracias :)

Francisca Alejandra Salinas Castillo

student•

Aquí hay una transcripción de todo lo que comentó el profesor 👇:

Cuando React ++renderiza++ los componentes decimos que ++entran en escena++. Cuando su estado cambia o recibe unos props diferentes se ++actualiza++. Y cuando cambiamos de página y ese componente ya no está, decimos que se ++desmontó++. Esto es el ciclo de vida.

++Montaje:++

Representa el momento donde se inserta el código del componente en el DOM.
Se llaman tres métodos: ++constructor++, ++render++ y ++componentDidMount++.

Cuando decimos que se ++monta el componente++, significa que React está introduciendo el código que lo representa en el ++DOM++. El ++DOM ++es este documento HTML que representa la página que estamos viendo. El ++constructor++ es el lugar perfecto para inicializar estado, o para inicializar valores. El ++render++ es el momento preciso donde React va a calcular el elemento que representa este componente y lo va a introducir en el código. Una vez eso ocurra, React va a llamar a una señal, el método ++componentDidMount++. Cuando ++componentDidMount++ se llama, nuestro componente ya es visible en pantalla (ya está su código en el DOM).

++Actualización:++

Ocurre cuando los props o el estado del componente cambia.
Se llaman dos métodos: ++render++ y ++componentDidUpdate++.

Cuando los props o el state del componente cambia, ocurre una ++actualización++. El componente vuelve a ++renderizarse++, pues su información cambió, así que posiblemente su aspecto visual es otro. Por ende, hay que volver a ++renderizar++. Esto también ++aplica a cualquier componente descendiente++ de este componente. Como segundo paso de la actualización, React va a llamar a otra señal, el método ++componentDidUpdate++. Este método va a recibir dos argumentos: los ++props++ que tenía anteriormente y el ++estado++ que tenía anteriormente. Esto nos va a servir ++por si queremos comparar++ con la versión anterior del componente y la versión actual.

++Desmontaje:++

Nos da la oportunidad de hacer limpieza de nuestro componente.
Se llama sólo un método: ++componentWillUnmount++.

Es cuando el componente ++sale de escena++, desaparece de la pantalla, cuando por ejemplo se navega de una página a otra y ya no está ese código. React llama a la señal ++componentWillUnmount++, que es lugar perfecto para limpiar memoria, a veces podemos usar timeout o intervalos, que si no cancelamos hará que perdamos memoria en el componente, cosa que debemos evitar.

Fernando Fajardo

student•

Ciclo de vida y llamado de metodos

Montaje

constructor
render
componentDidMount

Actualizacion

render
componentDidUpdate

DesMontaje

componentWillUnMount

David Behar

student•

Está buenísimo el artículo que redactó Óscar Barajas en el curso de React Práctico

Jhon Carlos Colorado Angulo

student•

Si está muy bueno.

Wilson Delgado

student•

super!

Miguel Angel Morales Larriega

student•

Ahor en hooks ya no es necesario todo esto. Solo importando useEffect al momento de importar React, hace que los staless funcitonal component y los functional component puedan utilizar ciclo de vida. ejemplo:

import React, {useEffect} from 'react';

useEffect(() => {

}, [])

en la parte de los corchetes van los states que usaremos en esta nueva version de ciclo de vida.

Pero cual es la ventaja de useEffect? pues es componentDidMount y componentDidUpdate a la vez y puede usarse en componentes funcionales

Ramiro Contreras León

student•

Richard podría (o debería) capacitar a muchos profesores, para que entiendan cómo es que deben explicar cosas nuevas a los alumnos para que que queden claras.

Gustavo Quino Crispín

student•

Mi resumen de la clase, espero que ayude, si hay algo que mejorar aportan.

Ciclo de vida de un componente

A) Montaje.- Indica que React esta introduciendo el código al DOM HTML. Cuando ocurre el montaje va ocurrir de 3 métodos:

Constructor (inicializar valores ejem: states, variables, etc)
Render (React calculara lo que el elemento representa este componete y lo introducirá al código)
componentDidMount (Cuando el render ejecuta el elemento, el componentDidMount lo mostrará en pantalla)

B) Actualización.- Ocurre cuando los props o los State's del componente cambian, y esto llama 2 métodos:

Render (Se debe renderizar cada vez que los valores del componente cambian)
componentDidUpdate (React llama como señal componentDidUpdate que recibe 2 argumentos, los props y el State que tenia antes. Ejem: Esto podria servir para comparar entre la version anterior y actual del componente)

C) DesMontaje.- Cuando el componete sale de escena (ejem: Cuando cambias de pagina, perfecto para limpiar recursos Llama un método: *Quitar contenido, para presentar nuevo contenido. 1.- componentWillUnmount (Es el lugar correcto para liberar recursos)

Manuel Rivera

student•

Ciclo de Vida de un Componente

Montaje => (Constructor, render, ComponentDidMount ) Actualización => (render, ComponentDidUpdate(props, estado anterior)) Desmontaje => (ComponentWillUnmount)

Jonathan Duarte

student•

Cual es el primer metodo que se ejecuta cuando se monta un componente?

Ricardo Lugo Recillas

student•

componentDidMount()

Juan Castro

teacher•

Puedes darle unos :eyes: a la documentación de React para ver el orden en que se ejecutan los métodos del ciclo de vida de los componentes de tipo clase en React:

:point_right: https://es.reactjs.org/docs/react-component.html

Platzi Team

student•

En el constructor se inicializa el state o valores

Leandro Videla

student•

Hola! Yo suelo utilizar el componentDidMount() para hacer los document.getElement... una vez que ya se cargó el HTML de la página.

El caso es el siguiente: Quiero agregar una clase a un <h2> una vez que el HTML ya se haya cargado.

componentDidMount(){
	const title = document.getElementByTagName('h2');
	
	//Agrego clase "show" 
	title.classList.add('show')
}

Este caso de uso sería correcto? Saludos!

John Andrey Serrano

student•

Hola yo creo que si porque el component ya hizo el ciclo del render igual funciona.

Jansen Peña

student•

Si lo que intentas es hacer un fade in de ese <H2>, otras opciones pueden ser:

Implementar una animación css con keyframes (que se ejecutará automáticamente apenas el elemento entra al DOM).
Si son varios elementos los que vas animar, puedes poner un flag en el state (por ejemplo: this.state = { mounted: false }) y hacer un setState({ mounted: true }) en el componentDidmount, y en el atributo clase del <h2> poner un condicional así: <h2 className={ this.state.mounted ? 'show' : ''} >Soy un H2</h2>

Miguel Angel Morales Larriega

student•

Una forma de saber el orden de la ejecución de cada uno sería realizando un console .log a cada uno, incluyendo al state:

componentDidMount(){ console.log("yo me ejecuto cuando esta todo listo"); }

componentDidUpdate(){ console.log("algo cambió en el componente"); }

componentWillMount(){ console.log("el componente aun no esta listo"); } componentWillUnMount(){ console.log("un nuevo componente ha sido cargado, y sera reemplazado, pero puedes ejecutar algo antes de que eso pase"); } state = { console.log("estado actual") }

Victor Hugo Cortés Posada

student•

creo que es bueno señalar que, si te encuentras un proyecto con una versión vieja de react, te puedes encontrar con el componentWillMount(), componentWillReceiveProps() y componentWillUpdate().

Desde la versión 16.3 de React los desarrolladores evitan utilizarlas porque son obsoletas. Pero no quiere decir que no existan y todavía siguen disponibles en el ciclo de vida.

These methods are considered legacy and you should avoid them in new code:

UNSAFE_componentWillMount()
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()

Willy David Da Conceicao Lozada

student•

SON DOS APUNTES EL DE YOUTUBE Y EL DE ESTA CLASE ESTUVO MUY PARECIDO 😬😮 ![](

![](

Alejandro Daniel Oroncoy Almeyda

student•

Con hooks existe una funcion llamada useEffect que es una combinación de los 3 principales metodos que nos explican en esta clase!

Gabriel De Andrade

student•

Si, de hecho hacia el final del Curso se explica :D

Danelia Sanchez Sanchez

student•

ReactJS | Lifecycle of Components

Introducción del ciclo de vida de un componente

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión