Ciclo de montaje

• Se ejecuta siempre y sólo lo hace una vez

• Construye el componente con su estado inicial

• Obtiene las props

• Primera ejecución del método render

• Termina con el componente montado en el DOM

Ciclo de montaje

• Se ejecuta antes de montar el componente

• Inicializar el state del componente

• Bindear contexto de los métodos

• No se debe llamar a setState

Ciclo de montaje

• Se ejecuta una vez

• Se invoca antes de montar el componente y antes del render

• Todavía no tenemos el componente disponible en el DOM

• Se recomienda usar el constructor en su lugar

• Se puede usar setState y no provoca otro render

Ciclo de montaje

• El único método obligatorio en nuestro componente
• Retorna los elementos que queremos mostrar en la interfaz

• No se debe llamar a setState, provocaría un loop infinito

Ciclo de montaje

• Se ejecuta tras renderizar el componente
• Ya tendremos una representación en el DOM
• Aquí podemos añadir las llamadas para recuperar datos del servidor y escuchar eventos
• Se puede usar setState

Ciclo de actualización

• Se ejecuta cuando nuestro componente:

1. Va a recibir nuevas props
2. Va a actualizar su state

• Determina si debe ejecutar el render

• Actualiza el contenido del componente

Ciclo de actualización

• Se ejecuta sólo cuando el componente va a recibir nuevas props.

• Útil cuando se usa las props para formar el state del componente.

• Se puede usar setState y a veces no provoca otro render.

Ciclo de actualización

• Se ejecuta antes de actualizar el componente.

• Determina si el componente se debe actualizar.

• Debe devolver un booleano (por defecto, siempre es true).

• No se debe llamar a setState.

Ciclo de actualización

• Se ejecuta antes de actualizar el componente.

• No se ejecuta si shouldComponentUpdate devolvió false.

• Muy pocos casos prácticos, sólo para posibles animaciones.

• No se debe llamar a setState o entrará en un loop infinito.

Ciclo de actualización

• Refleja las nuevas props y state del componente.

• No se ejecuta si shouldComponentUpdate devolvió false.

• Diffing DOM y montaje/desmontaje de Componentes.

• No se debe llamar a setState o entrará en un loop infinito.

Ciclo de actualización

• Se ejecuta tras actualizar el componente.

• Ejecutar funciones de librerías externas, usar el nuevo DOM o hacer llamadas externas.

• No se debe llamar a setState o entrará en un loop infinito.

Ciclo de desmontaje

• Se ejecuta sólo si el componente deja de renderizarse en la aplicación

• Sólo tiene una fase

Ciclo de desmontaje

• Se ejecuta justo antes de desmontar el componente

• Permite eliminar suscripciones de eventos, cancelar peticiones, limpiar intervalos y liberar recursos

• No se debe llamar a setState

Ciclo de error

• Se ejecuta solo cuando el componente lanza una excepción

• Sólo tiene una fase

• Permite manejar errores y excepciones

• También captura excepciones de los children

Ciclo de error

• Recibe el error y toda la información.

• Se puede actualizar el state para cambiar el comportamiento del componente