React.js Life Cicle

Video de la presentación: https://bit.ly/32kt9eT

Transcript

1. Fases del ciclo de vida
2. Cada método tiene un prefijo will o did dependiendo de si ocurren antes o después de cierta acción
3. MONTADO
4. constructor(props) • Inicializar el estado del componente • Enlazar eventos • Setear variables globales Nota: El componente aun no se muestra
5. componentWillMount() • Modificar el estado • No realizar llamados a API´s • No realizar suscripción a eventos Nota: El componente aun no se muestra
6. render() • Debe ser una funcion pura • No debe modificar el estado Nota: El componente ya se muestra
7. componentDidMount() • El mejor momento para llamar API´s • Realizar suscripciones a eventos • Modificar estado
8. ACTUALIZACIÓN
9. componentWillReceiveProps(nextProps) • Realizar cambios en los estados basado en las nuevas propiedades
10. shouldComponentUpdate(nextProps, nextState) • Validar si queremos renderizar o no el componente
11. componentWillUpdate(nextProps, nextState) • Realizar cualquier tipo de preparación Antes de que se actualice la UI
12. render() • Debe ser una funcion pura • No debe modificar el estado
13. componentDidUpdate(prevProps, prevState)
14. DESMONTADO
15. componentWillUnmount() • Dejar de escuchar eventos • Desuscribirse de un WebSocket • Cancelar peticiones HTTP
16. ERRORES
17. componentDidCatch() • Control de errores