Práctica del ciclo de vida

Clase 22 de 37 • Curso de React.js 2019

Clase anteriorSiguiente clase

María José Ledesma

student•

Dejo esto por aquí. Notas relacionadas al tema de la clase:

¡Nunca pares de aprender! (Y practicar)🦄

Juan Osio

student•

Gracias por tus anotaciones <3

Angel David Castiblanco Sepulveda

student•

Majoledesma, la crack del css en twitter jaja

Jaime David Burbano Montoya

student•

Constructor(props){
	/*Este método se ejecuta cuando se instancia un componente. Nos permite definir el estado inicial del 		componente, hacer bind de métodos y definir propiedades internas en las que podemos guardar muchos datos diferente*/
}

componentWillMonunt(){
	/*Este método se ejecuta cuando el componente se está por renderizar. En este punto es posible modificar el estado del componente sin causar una actualización (y por lo tanto no renderizar dos veces el componente).*/
}

render(){
	/*En este momento de la fase de montado se van a tomar las propiedades, el estado y el contexto y se va a generar la UI inicial de este componente*/
}

componentDidMount(){
	/*Este último método de la fase de montado se ejecuta una vez el componente se renderizó en el navegador y nos permite interactuar con el DOM o las otras APIs del navegador (geolocation, navigator, notificaciones, etc.).*/
}

componentWillReceiveProps(nextProps){
	/*Este método se ejecuta inmediatamente después que el componente reciba nuevas propiedades. En este punto es posible actualizar el estado para que refleje el cambio de propiedades, ya sea reiniciando su valor inicial o cambiándolo por uno nuevo.*/
}

shouldComponentUpdate(nextProps, nextState){
	/*Este método (el cual debe ser puro) se ejecuta antes de empezar a actualizar un componente, cuando llegan las nuevas propiedades (nextProps) y el nuevo estado (nextState).

Acá es posible validar que estos datos sean diferentes de los anteriores (this.props y this.state) y devolver true o false dependiendo de si queremos volver a renderizar o no el componente.*/
}

componentWillUpdate(nextProps, nextState){
	/*Una vez el método anterior devolvió true se ejecuta este método, acá es posible realizar cualquier tipo de preparación antes de que se actualice de la UI*/
}

Todos estos son las fases del ciclo de vida de un componente en su montaje y actualización, no esta el desmontado, pueden ver la información completa haciendo click aquí

Marcos Mella

student•

Si está, lee mejor el link que pasaste. Desmontado Esta última fase consiste en un solo método que se ejecuta antes de que un componente se elimine (desmonte) de la UI de nuestra aplicación.

componentWillUnmount()

Jaime David Burbano Montoya

student•

Me refería a que en el post que yo hice, no esta el desmontado

GABRIELA VALLENILLA

student•

Qué buena manera de explicarlo, en el curso anterior no se entendió nada del ciclo de vida..

Esteban Ciudad

student•

Se tenía que decir y se dijo 🤭

Jerson Morrow

student•

Total mente de acuerdo en Platzi estan mejorando bastante para dar lo mejor de lo mejor y con este curso la rompieron!

Wandy Rafael Santana Evangelista

student•

Apenas van 22 clases, y estoy muy emocionado con lo que ya puedo hacer. Un profesor increible.

Jhon Carlos Colorado Angulo

student•

Si la verdad ya es mucho lo que podemos hacer hasta aquí.

Bernardo Aguayo Ortega

student•

sin duda alguna!!

Andrés Campuzano Garzón

student•

Excelente explicación, soy nuevo en la programación por lo cual me gustaría ayudarle a los compañeros que tiene problemas, solo que no tengo el conocimiento, de igual manera recuerden que si tienen errores, pueden usar https://stackoverflow.com/ o guiarse por medio de los foros de Google, todos los errores que he tenido los he solucionado por medio de Google, no por medio de los aportes de la Clase. Saludos y animo con el código!

Bernardo Aguayo Ortega

student•

venga!!

Aaron Felipe Isaacs

student•

Antes de llegar al final del vídeo me dieron ganas de hacer el ejemplo un poco más real, por lo que cree un API con los datos y los llamo con fecth, el API es el siguiente:

API Curso React

Con el siguiente tutorial ustedes pueden crear el suyo en firebase:

https://platzi.com/blog/crear-api-firebase-cloud-functions/

Mi API tiene un retardo de 2 segundos antes de devolver los datos con el propósito de poder resolver lo expuesto en el vídeo (el componente se desmontada antes de que se resuelva la promesa del fetch).

Aquí les comparto mi solución:

import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'
import BadgesList from '../components/BadgesList'
import confLogo from '../images/badge-header.svg'
import './styles/Badges.css'

const API = 'https://us-central1-api-cv-3b8cb.cloudfunctions.net/react';
class Badges extends Component {
  constructor(props) {
    super(props)
    console.log('1ro. Constructor')
    this.state = {
      data: []
    }
  }

  componentDidMount() {
    this.controller = new AbortController()
    this.signal = this.controller.signal
    this.mounted = true
    fetch(API, { signal: this.signal }).then(response => response.json())
    .then(data => {
      if(this.mounted) {
        this.setState(data)
      }
    })
    console.log('3ro. Component Did Mount')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('5to. Component Did Update')
    console.log({ prevProps, prevState })
    console.log({ props: this.props, state: this.state })
  }

  componentWillUnmount() {
    console.log('6to. Component Will Unmount')
    this.mounted = false
  }

  render() {
    console.log('2do. y 4to. Render')
    return (
      <Fragment>
        <div className="Badges">
          <div className="Badges__hero">
            <div className="Badges__container">
              <img src={confLogo} alt="" className="Badges_conf-logo" />
            </div>
          </div>
        </div>
        <div className="Badges__container">
          <div className="Badges__buttons">
            <Link to="/badges/new" className="btn btn-primary">New Badge</Link>
          </div>
          <div className="Badges__list">
            <BadgesList badges={this.state.data} />
          </div>
        </div>
      </Fragment>
    )
  }
}

export default Badges

Juan J. López Lira

student•

Muy buen aporte, tenia la duda sobre que pasa con los llamados a API's que no se completan por un exit...

Jimmy Buriticá Londoño

student•

Funciona muy bien, gracias.

David Jesus Palma Lugo

student•

Este curso de react de verdad q es excelente he hecho otros q son un fracaso en comparación a este xD

Julio César Felix Abril

student•

Me encantó la clase, Richard es un muy buen profesor, te anima bastante.

Samar Jaffal

student•

Ahora si viene la parte que me gusta. Peticiones a Api 💙

Paul Cortes

student•

Totalmente satisfecho con las explicaciones de Richard Kaufman, es un excelente profesor y se nota la experiencia da muy buenos consejos y nos enseña con su vasta experiencia

ANGEL DAVID SULBARAN CALDERON

student•

Practica del Ciclo de Vida

Un componente pasa por muchas fases; montaje, actualización y desmontaje y cada una de ellas tiene varios métodos que ocurren, cuando ocurre esa fase, en esta clase comenzaremos a trabajar con el ciclo de vida y vamos a estudiar como podemos utilizar cada una de los métodos para hacer nuestras apps mucho mejores.

Primero vamos a la pagina de los Badges y escribimos los primeros tres métodos en el editor de código, justo encima de render para que quede de la siguiente manera;


      constructor () {
          console.log(`1. constructor()`)
      }

      componentDidMount() {
        console.log(`3. componentDidMount()`)

      }

    render(){
        console.log(`3. render()`)

Cada uno con su console.log para ver el orden en el que harán su efecto, primero va el constructor, luego el render y por ultimo componentDidMount.

En el constructor hay una cosa que nos falta y es que este recibe props y lo utilizamos para inicializar la superclase que en este caso es component y para esto, llamamos super son esos mismos props.

El constructor, si lo usamos, es el lugar donde deberían estar nuestros states, por lo que debemos pasarlos para allá pero no bajo el nombre de “state” sino bajo el nombre de “this.state”

      constructor (props) {
          super(props);
          console.log(`1. constructor()`);

             
            this.state = {
                data: [
                {
                    id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
                    firstName: 'Freda',
                    lastName: 'Grady',
                    email: 'Leann_Berge@gmail.com',
                    jobTitle: 'Legacy Brand Director',
                    twitter: 'FredaGrady22221-7573',
                    avatarUrl:
                    'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
                },
                {
                    id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
                    firstName: 'Major',
                    lastName: 'Rodriguez',
                    email: 'Ilene66@hotmail.com',
                    jobTitle: 'Human Research Architect',
                    twitter: 'MajorRodriguez61545',
                    avatarUrl:
                    'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
                },
                {
                    id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
                    firstName: 'Daphney',
                    lastName: 'Torphy',
                    email: 'Ron61@hotmail.com',
                    jobTitle: 'National Markets Officer',
                    twitter: 'DaphneyTorphy96105',
                    avatarUrl:
                    'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
                },
                ],
         };
      }

De la manera planteada arriba.

Nuestro próximo paso sera simular una petición a un api, de manera que simularemos el estado donde data esta vacio y en el componentDidMount vamos a simular una petición al api donde vamos a obtener resultados en algún momento, para ellos usaremos una función asíncrona como lo es el “setTimeOut”

Pasaremos la data de nuestro state inicial a la data de nuestro this.state en nuestro componentDidMount, de manera que nuestro state inicial estará vacio, usando asi nuestra función asíncrona setTimeout dándole un retraso de 3mil milisegundos para asi al cargar la pagina, la información de nuestros badges cargara 3 segundos depues de cargar el resto de nuestra pagina, por lo que tendrá que renderizar nuevamente esa sección agregando la data de nuestros badges. El código debe quedar de esta manera;

class Badges extends React.Component {
    
      constructor (props) {
          super(props);
          console.log(`1. constructor()`);

             
            this.state = {
                data: [],
         };
      }

      componentDidMount() {
        console.log(`3. componentDidMount()`);

        setTimeout(()=&gt;{
            this.setState({
                data:[
                    {
                        id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
                        firstName: 'Freda',
                        lastName: 'Grady',
                        email: 'Leann_Berge@gmail.com',
                        jobTitle: 'Legacy Brand Director',
                        twitter: 'FredaGrady22221-7573',
                        avatarUrl:
                        'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
                    },
                    {
                        id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
                        firstName: 'Major',
                        lastName: 'Rodriguez',
                        email: 'Ilene66@hotmail.com',
                        jobTitle: 'Human Research Architect',
                        twitter: 'MajorRodriguez61545',
                        avatarUrl:
                        'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
                    },
                    {
                        id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
                        firstName: 'Daphney',
                        lastName: 'Torphy',
                        email: 'Ron61@hotmail.com',
                        jobTitle: 'National Markets Officer',
                        twitter: 'DaphneyTorphy96105',
                        avatarUrl:
                        'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
                    },
                ]
                
            })
        }, 3000)

      }

Junto a esa actualización, de llama a componentDidUpdate y allí recibiremos dos argumentos, prevProps y prevState, realizaremos un console log con el mismo y abajo realizaremos otro console.log para poder comparar los props, de manera que nuestro código quedara de esta manera;


      componentDidUpdate(prevProps, prevState){
          console.log(`5. componentDidUpdate()`);
          console.log({
              prevProps: prevProps, prevState: prevState
          })  
          
          console.log({
            props: this.props,
            state: this.state,
          });
      }

Como podremos observar luego en nuestra consola, los estados entre nuestro componenetDidMount y nuestro componentWillUpdate son totalmente distintos, puesto que nos muestra la diferencia entre los states. Luego de esto agregaremos nuestro componentWillUnmount

      componentWillUnmount(){
          console.log(`6. componentWillUnmount()`)
      }

Este se imprimirá luego de que le demos click a “New Badge” en nuestra consola el console.log Ahora hay un detalle importante en el que hay que trabajar y es ser muy preciso con los tiempos, es decir si vamos a la página anterior y le damos nuevamente a “New Badge” rápidamente, la consola nos dará un “warning” el cual nos explicara que react no puede realizar un update en un componente que esta desmontado, lo que paso es que nuestro llamado asíncrono iba a efectuarse luego de 3 segundos e iba a actualizar el estado pero pasa que el componente ya no existe, eso es un error común que es importante evitar.

En el caso del setTimeout se puede arreglar de la siguiente manera;

      componentDidMount() {
        console.log(`3. componentDidMount()`);

        this.timeoutId = setTimeout(()=&gt;{
            this.setState({
                data:[
                    {
                        id: '2de30c42-9deb-40fc-a41f-05e62b5939a7',
                        firstName: 'Freda',
                        lastName: 'Grady',
                        email: 'Leann_Berge@gmail.com',
                        jobTitle: 'Legacy Brand Director',
                        twitter: 'FredaGrady22221-7573',
                        avatarUrl:
                        'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',
                    },
                    {
                        id: 'd00d3614-101a-44ca-b6c2-0be075aeed3d',
                        firstName: 'Major',
                        lastName: 'Rodriguez',
                        email: 'Ilene66@hotmail.com',
                        jobTitle: 'Human Research Architect',
                        twitter: 'MajorRodriguez61545',
                        avatarUrl:
                        'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',
                    },
                    {
                        id: '63c03386-33a2-4512-9ac1-354ad7bec5e9',
                        firstName: 'Daphney',
                        lastName: 'Torphy',
                        email: 'Ron61@hotmail.com',
                        jobTitle: 'National Markets Officer',
                        twitter: 'DaphneyTorphy96105',
                        avatarUrl:
                        'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',
                    },
                ]
                
            })
        }, 3000)

      }

      componentDidUpdate(prevProps, prevState){
          console.log(`5. componentDidUpdate()`);
          console.log({
              prevProps: prevProps, prevState: prevState
          })  
          
          console.log({
            props: this.props,
            state: this.state,
          });
      }

      componentWillUnmount(){
          console.log(`6. componentWillUnmount()`);
        clearTimeout(this.timeoutId);

      }

Nuestro setTimeout nos va a retornar la información que le estamos pasando al setState por lo que aca como podemos observar le colocamos un id y abajo llamaremos una función que sera “clearTimeout” que sirve para cancelar la actualización del componente y que no nos de error nuestro código, este código, tenemos que pasarlo a “componentWilUnmount” para que al momento de que queramos pasar a otra página, se cancele el update de nuestro componente. Con esto ahorramos memoria.

Fernando Pioli Martínez

student•

Hasta yo, que soy una bestia que viene del diseño lo entendí!

Manuel Fernando Jaimes Mejía

student•

Que buen curso, las explicaciones son muy claras. Mas cursos de Kaufman, por favor.

Jhon Alexander Romero Gonzaga

student•

Un poco complicado al inicio pero una prueba en el codigo y ahora todo esta claro.

Facundo Anibal Martinez

student•

Richard Kaufman es el mejor profesor que hay en platzi

Gabriel Rodriguez

student•

Sparragus me cae bien. Dejen las simulaciones y consuman API's 😂😂😂

Jeferson Velásquez

student•

"Las simulaciones son para niños", muy buena esa también 😆🚀🚀🚀

Alan Jackson Duarte Marroquin

student•

A lo largo del curso, he estado creando otros proyectos para practicar y también estoy llevando el curso de webpack, sin embargo me surge una duda, no sé si solo a mi me pasa, pero cuando hago un nuevo proyecto con create-react-dom, al terminar me genera el reporte de la instalación del npm y siempre me aparece que encontró vulnerabilidades (en un video también de platzi vi que esto es malo), ahora bien no sé si esto es normal? (estoy utilizando ubuntu)

Alan Jackson Duarte Marroquin

student•

No lo mencioné pero el curso está increible hahah

Job Abdala Coronado Duran

student•

Esto es una nueva característica de npm cuando instalamos paquetes este nos alerta sobre las vulnerabilidades te comparto este link en donde habla mas a fondo de esto. https://www.todojs.com/npm-audit-avisa-de-vulnerabilidades/

José Tuzinkievicz

student•

Las simulaciones son para niños XD

Willy David Da Conceicao Lozada

student•

![](

Miguel Angel Soler

student•

Práctica del ciclo de vida

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