El documento presenta una introducción a los ciclos de vida en React, dividiéndolos en las fases de montaje, actualización y desmontaje. Explica cada una de las fases y los métodos asociados como constructor, render, componentDidMount, shouldComponentUpdate y componentWillUnmount. Resalta la importancia de usar adecuadamente los ciclos de vida para mejorar el rendimiento y la experiencia del usuario.

1. MAD · NOV 23-24 · 2018
Reactjs
El ciclo de la vida
Javier Fernández
Software developer
Nacho Fanjul
Software architect & Key Specialist
MAD · NOV 23-24 · 2018

2. MAD · NOV 23-24 · 2018

3. MAD · NOV 23-24 · 2018
Agenda

4. MAD · NOV 23-24 · 2018
Nuestra premisa para desarrollar en reactjs
Principios
de desarrollo de componentes
Reutilización
+ Pequeño
El estado no se toca
Mi padre “the Boss”
Inmutable/mutable+ Tonto

5. MAD · NOV 23-24 · 2018
Jerarquía de componentes
Flujo de datos Eventos

6. MAD · NOV 23-24 · 2018
Funcionamiento de esa jerarquía
Cambio de estado
render() {
return (
<MyComponent />
);
}

7. MAD · NOV 23-24 · 2018
Funcionamiento del componente
props
const MyComponent = (props)=> {
return (
<MyChildComponet />
);
}
DOM

8. MAD · NOV 23-24 · 2018
¿Qué son los ciclos de vida?

9. MAD · NOV 23-24 · 2018
Ciclos de vida - Grupos
Mounting Updating Unmounting

10. MAD · NOV 23-24 · 2018
Ciclos de vida - Fases
Render Pre-commit Commit

11. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor

12. MAD · NOV 23-24 · 2018
constructor(props)

13. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDeriveredStateFromProps

14. MAD · NOV 23-24 · 2018
getDerivedStateFromProps (nextProps, prevState)

15. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDerivedStateFromProps
render

16. MAD · NOV 23-24 · 2018
render()

17. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDeriveredStateFromProps
render
DOMVIRTUALDOM
componentDidMount

18. MAD · NOV 23-24 · 2018
componentDidMount()

19. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDeriveredStateFromProps
shouldComponent
Update
componentDidMount
New props setState() forceUpdate()
DOM
render
VIRTUALDOM

20. MAD · NOV 23-24 · 2018
shouldComponentUpdate(nextProps, nextState)

21. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDeriveredStateFromProps
shouldComponent
Update
render
getSnapshotBeforeUpdate
componentDidMount
New props setState() forceUpdate()
DOMVIRTUALDOM

22. MAD · NOV 23-24 · 2018
getSnapshotBeforeUpdate(prevProps, prevState)

23. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDeriveredStateFromProps
shouldComponent
Update
render
getSnapshotBeforeUpdate
componentDidUpdatecomponentDidMount
New props setState() forceUpdate()
DOMVIRTUALDOM

24. MAD · NOV 23-24 · 2018
componentDidUpdate(prevProps, prevState, snapshot)

25. MAD · NOV 23-24 · 2018
Mounting Updating Unmounting
constructor
getDeriveredStateFromProps
shouldComponent
Update
render
getSnapshotBeforeUpdate
componentDidUpdatecomponentDidMount componentWillUnmount
New props setState() forceUpdate()
DOMVIRTUALDOM

26. MAD · NOV 23-24 · 2018
componentWillUnmount()

27. MAD · NOV 23-24 · 2018
UnmountingMounting Updating
Algunas cosas más…
UNSAFE_
componentWillReceiveProps
componentDidCatch
UNSAFE_
componentWillUpdate
UNSAFE_componentWillMo
unt
getDerivedStateFromError

28. MAD · NOV 23-24 · 2018

29. MAD · NOV 23-24 · 2018
“Las cucarachas nacen, crecen,
se reproducen y mueren…“
by dpto. Marketing de Cruz Verde

30. MAD · NOV 23-24 · 2018
Un buen uso de los ciclos de vida, mejora el rendimiento y
la experiencia de usuario.

31. MAD · NOV 23-24 · 2018
Un mal uso de los ciclos de vida, provoca pérdidas de memoria
y mala experiencia de usuario.

32. MAD · NOV 23-24 · 2018
Javier Fernandez
Software developer
jfernadez@pasiona.com - @javiiscript
Nacho Fanjul
Software architect & Key Specialist
nfanjul@pasiona.com - @nfanjul
https://github.com/nfanjul/lifecyclesreact

33. MAD · NOV 23-24 · 2018