3.1 KiB
| title | localeTitle |
|---|---|
| Life Cycle Methods Of A Component | Métodos del ciclo de vida de un componente |
Métodos del ciclo de vida de un componente
Cuando comenzamos a trabajar con componentes, necesitamos realizar varias acciones para actualizar el estado o realizar algunas acciones cuando algo cambia en ese componente. En este escenario, ¡los métodos de ciclo de vida de un componente son útiles! Así que vamos a sumergirnos en ellos en este artículo.
En términos generales, podemos dividir los métodos del ciclo de vida en 3 categorías.
- Montaje
- Actualizando
- Desmontaje
Como los métodos del ciclo de vida son autoexplicativos, solo mencionaré los nombres de los métodos. Por favor, siéntase libre de contribuir a este artículo, si es necesario.
Montaje:
a. constructor()
segundo. componentWillMount()
do. render()
re. componentDidMount()
Actualizando:
a. componentWillRecieveProps()
segundo. shouldComponentUpdate()
do. componentWillUpdate()
re. render()
mi. componentDidUpdate()
Desmontaje:
a. componentWillUnmount()
Algunos datos interesantes a tener en cuenta:
constructor,componentWillMount,componentDidMountycomponentWillUnmountse llamarán solo una vez durante el ciclo de vida de un componente.componentWillUpdate, ycomponentDidUpdatesolo se ejecutarán si y solo sishouldComponentUpdatedevuelve true.- Se llamará a
componentWillUnmount()justo antes de desmontar cualquier componente y, por lo tanto, se puede usar para liberar la memoria utilizada, cerrar cualquier conexión a DB, etc.
Se pueden aprender muchas cosas sumergiéndose en la codificación. Así que ensucia tus manos codificando.
Nota:
"Las advertencias de desaprobación se habilitarán con una futura versión 16.x, pero los ciclos de vida heredados continuarán funcionando hasta la versión 17. " 1
"Incluso en la versión 17, aún será posible usarlos, pero tendrán un alias con un prefijo" SEGURO_ "para indicar que podrían causar problemas. También hemos preparado un script automatizado para cambiar el nombre en el código existente". 1
En otras palabras, estos métodos de ciclos de vida anteriores aún estarán disponibles como:
UNSAFE_componentWillMountUNSAFE_componentWillReceivePropsUNSAFE_componentWillUpdate
Nuevos métodos de ciclo de vida
Se introducirán nuevos métodos de ciclo de vida en React 17
getDerivedStateFromPropsserá una alternativa más segura acomponentWillReceiveProps.getSnapshotBeforeUpdateagregarágetSnapshotBeforeUpdatepara admitir la lectura segura de las propiedades de DOM.
Se pueden aprender muchas cosas sumergiéndose en la codificación. Así que ensucia tus manos codificando.