Ciclo de vida de un componente

Clase 9 de 58 • Curso Profesional de React con Redux 2016

Resumen

Todos los componentes tienen momento,

Montado:

Constructor() → definir estado
conponentWillMount() → Aún no esta el DOM, no se deben hacer peticiones sincronas
render() → dibujamos el dom
componentDidMount → Después que la aplicación se monta

Actualización:

componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState) → prueba si es necesario actualizar el componente
componentWillUpdate(nextProps, nextState) → el componente sera montado
render() → Renderiza la aplicación
componenteDidUpdate(prevProps, prevstate) → podemos volver a asignar algo

Desmontado:

componentWillUnmount() → Limpiar eventos o eliminar algunas cosas

Andres Pineda

student•

El método shouldComponentUpdate(nextProps, nextState) en vez de:

shouldComponentUpdate(nextProps, nextState){
    if(nextState.count !== this.state.count) return true;
    return false;
}

por facilidad y evitar redundancia debería ser

shouldComponentUpdate(nextProps, nextState){
    return nextState.count !== this.state.count;
}

Rosario Nery Huanca Gonza

student•

Al menos en este caso si, pero seguro q en la mayoria de casos el primero sera mejor, ya q se compararan mas comportamientos

Javier Marin

student•

Una acotación y una pregunta.

Primero, siento que vas muy rápido, algunos sabemos JS pero otros no, y yo aún sabiendo JS no se nada de React, siento que vas súper acelerado aunque se te entienda hasta cierto punto… pero por ejemplo no recuero ver que explicaras como son las interpolaciones por ejemplo, al menos para mi fue evidente pero no se si para otros.

Ahora, pregunto ¿Cuando se desmonta un componente? Eso es algo importante, sabemos que ok, el evento se va a ejecutar al desmotar el componente, ¿Eso ocurre en qué preciso momento? ¿Al cambiar de ruta? ¿Al removerlo del DOM? ¿Hay formas especiales en las que React desmonta un componente?

Sergio Daniel Xalambrí

student•

Sobre la pregunta: Un componente se desmonta cuando se le deja de hacer render, así de simple ¿En que momento se le deja de hacer render? Si tenemos un componente <A /> que renderiza <B /> y debido a un cambio de estado deja de renderizarlo (deja de hacer return <B /> en el método render) entonces <B /> se desmonta del DOM y se ejecuta el método componentWillUnmount de ese componente (de <B /> no <A />).

Algunos ejemplos: un cambio de ruta significa que la página anterior se desmonta, cuando un componente se renderiza si una condición se cumple y esta deja de cumplirse (el caso del cambio de estado).

Sobre la acotación: el curso no es para enseñar JS, es sobre React, cosas como interpolaciones son de JS y no exclusivas de React y por lo tanto las doy por sabidas ya que necesitas saber JS para aprender React (y cualquier framework y librería en general). Hay cursos para aprender JS desde 0 (programación básica, JS Definitivo) que serían mejores que este para aprender el lenguaje.

Y si te parece que voy muy rápido sobre algo de React recuerda que siempre puedes dejar tus preguntas en los comentarios (como hiciste ahora) o en las discusiones y estoy pendiente para responderlas 😄.

Augusto Gonzalez

student•

Creo que tendré que tomar el curso de JavaScript definitivo. hehe. sin embargo por motivos de tiempo creo que seguiré con el de React Redux. Por ahora es lo que puedo hacer. Y Muy interesante la pregunta! Tremendo aporte.

José Alejandro Muñoz Ruiz

student•

@sergiodxa, por que al crear un objeto siempre lo terminas con una coma? no había visto eso.

ejemplos:

this.state = {
        count: 0**,**
      };

this.setState({
        count: this.state.count + 1**,**
      });

Sergio Daniel Xalambrí

student•

Es simplemente una costumbre, el linter que usamos más adelante en el curso te obliga a usarlo. Lo bueno de siempre poner la coma al final de todas las propiedades es que luego cuando quieras agregar otra propiedad simplemente apretás enter y la agregas, no hay que modificar la propiedad anterior para agregar la ,.

José Alejandro Muñoz Ruiz

student•

Entiendo, Muchas gracias por aclarar mi simple duda =D

MiguelAngel Amaro Cortez

student•

Excelente Profesor!

Paulina Elizalde

student•

el shouldComponentUpdate lo probé programando que solo se actualizará cuando el count fuera menor de 10

      shouldComponentUpdate(nextProps, nextState){
          return nextState.count < 10
      }

Juan David E.R.

student•

Esta excelente el curso, ya entiendo los problemas que tenia con el bind, muy buen profesor. :3

The Busking Project

student•

Quedé con la duda en el método shouldComponentUpdate, ¿por defecto todos lo componentes devuelven true si cambian los props o si cambia el state, pero los pure components devuelven true si cambian los props y el state?

Sergio Daniel Xalambrí

student•

Los PureComponente implementan una validación para verificar si al menos un dato de los props o del state cambió y si no lo hizo devolver false para evitar un re-render.

David Camacho

student•

Los componentes creados al extender React.PureComponent implementan esta validación sin necesidad de que hagamos nada y de una forma que no afecte al rendimiento. El resto de componentes devuelven siempre true por defecto

Paulina Elizalde

student•

el componente siempre tiene que tener un constructor?

Sergio Daniel Xalambrí

student•

Solo necesitas el constructor si vas a crear propiedades como state o si vas a hacer bind de métodos.

Erick Vanegas

student•

Si tengo un componente padre “A” que contiene a un componente hijo “B”.
Al desmontar el componente padre A, ¿Se invocará o no el evento de componentWillUnmount del elemento hijo B ?

David Camacho

student•

Hay que tener cuidado con este método ya que si nuestro componente tiene otros componentes con estado como hijos devolver false acá puede impedir que estos sub-componentes no se actualicen al detectar un cambio.

Juan Sebastián Zapata

student•

Hola! ¿cuáles métodos se ejecutan en el servidor y cuáles en el cliente?

Sergio Daniel Xalambrí

student•

constructor y componentWillMount se ejecutan al hacer server render
todos los se ejecutan en el cliente al hacer client side render (incluso los dos de server render)

Jose Alvarez Alvarez

student•

Pregunta o solo me pasa a mí como que en algunos videos y en algunas partes se adelanta solo el video?

Ricardo Azpeitia P.

student•

Puedes probar con el server B

Augusto Gonzalez

student•

A mi también me pasa. De repente yo holy shit en que momento lleva tanto codigo! Creo que sucede por la latencia, si mal no me equivoco.

Andres Cuello

student•

Aun no logro entender el .Bind :c

Platzi Team

student•

Pregunta… Lo mas recomendable es que por cada componente yo cree una clase con los métodos que define su ciclo de vida?

Sergio Daniel Xalambrí

student•

Solo definilos si los necesitas.

Ciclo de vida de un componente

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS