{"id":3563,"date":"2018-05-06T22:44:55","date_gmt":"2018-05-06T22:44:55","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/05\/06\/react-metodos-ciclo-vida-componente\/"},"modified":"2024-04-14T16:42:27","modified_gmt":"2024-04-14T22:42:27","slug":"react-metodos-ciclo-vida-componente","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/react-metodos-ciclo-vida-componente\/","title":{"rendered":"React: M\u00e9todos del ciclo de vida de un componente"},"content":{"rendered":"
Introducci\u00f3n y diagrama<\/h2>\n\n\n\n
Antes de todo, estoy en el proceso de aprendizaje de React y en esta publicaci\u00f3n voy a explicar, seg\u00fan mi entendimiento, los m\u00e9todos del ciclo de vida de un componente con React.<\/p>\n\n\n\n
A partir de la versi\u00f3n 16.3 de React se agregaron nuevos m\u00e9todos del ciclo de vida de un componente para mejorar el rendimiento, buenas practicas y as\u00ed obtener una mejor calidad de los componentes creados.<\/p>\n\n\n\n
Principalmente este cambio es debido a componentes con funcionalidad as\u00edncrona, esto es muy importante porque normalmente el mundo real es as\u00edncrono y los componentes que creamos son utilizados en el mundo real por personas.<\/p>\n\n\n\n
Por esta raz\u00f3n tambi\u00e9n se empiezan a dejar de utilizar los siguientes m\u00e9todos, esto suceder\u00e1 a partir de la versi\u00f3n 17 de React:<\/p>\n\n\n\n
Dado que los anteriores m\u00e9todos se dejaran de usar en la version 17, los siguientes m\u00e9todos son los recomendados a utilizar en un componente:<\/p>\n\n\n\n
Y para visualizar su relaci\u00f3n, aqu\u00ed est\u00e1 un diagrama de flujo:<\/p>\n\n\n\nDiagrama de los m\u00e9todos del ciclo de vida de un componente en React<\/figcaption><\/figure>\n\n\n\n
Si observamos el diagrama, el m\u00e9todo static getDerivedStateFromProps(nextProps, prevState)<\/strong><\/code> sustituye al m\u00e9todo deprecado componentWillReceiveProps(nextProps)<\/strong><\/code>, tambi\u00e9n parece ser que el m\u00e9todo getSnapshotBeforeUpdate(prevProps, prevState)<\/strong><\/code> sustituye al m\u00e9todo deprecado componentWillUpdate(nextProps, nextState)<\/strong><\/code>.<\/p>\n\n\n\n
Para fines de demostraci\u00f3n vamos a crear un componente Padre<\/code> y otro componente Animal<\/code> (componente hijo), lo ideal es que el componente Padre<\/code> maneje todo el state<\/code>, pero para demostrar el funcionamiento de los m\u00e9todos ocuparemos algo de state<\/code> en nuestro componente Animal<\/code>.<\/p>\n\n\n\n
constructor(props)<\/h2>\n\n\n\n
El constructor es un m\u00e9todo de la mayor\u00eda de los lenguajes de programaci\u00f3n orientada a objetos, y se utiliza para crear la instancia de una clase. En react el constructor se usa para crear la instancia de nuestro componente. <\/p>\n\n\n\n
Cabe mencionar que despu\u00e9s de la ejecuci\u00f3n de este m\u00e9todo, nuestro componente a\u00fan no se pinta en nuestro navegador, al proceso de pintado, es decir, insertarlo en el DOM, se le llama Montar <\/strong>either Mount <\/strong>en ingles.<\/p>\n\n\n\n
Como buena practica de programaci\u00f3n es importante ejecutar super()<\/code> dentro de un constructor para que realice cualquier llamada a constructores padres. <\/p>\n\n\n\n
En el caso de react se debe llamar con las props<\/code> recibidas en el constructor, o sea, super(props)<\/code>, esto nos permite poder acceder a las props a trav\u00e9s de this.props<\/code> dentro del constructor. <\/p>\n\n\n\n
El constructor se usa normalmente para las siguietes dos cosas:<\/p>\n\n\n\n
\n
Definir el estado local con un componente a trav\u00e9s de this.state<\/code>.<\/li>\n\n\n\n
Para enlazar el objeto this<\/code>(la instancia de nuestro componente) a los m\u00e9todos que son utilizados en el m\u00e9todo render()<\/code>. Estos m\u00e9todos son usados como manejadores de eventos<\/li>\n<\/ul>\n\n\n\n
El estado de nuestro componente en el constructor se define as\u00ed:<\/p>\n\n\n\n
![\"Diagrama](\"\/wp-content\/uploads\/2018\/05\/react-lifecycle-methods.png\")