ReactJS: El ciclo de vida de un componente (I)

ZB8O0DL

Como ya sabréis, he empezado a estudiar sobre la librería de componentes de interfaz ReactJS.

Poco a poco voy cogiéndole el gusto a esto de organizar la interfaz de nuestra aplicación por medio de componentes reutilizables y que nos ayuden a generar aplicaciones más mantenibles y de mayor calidad.

Si alguien no sabe sobre lo que estamos hablando, en el último post que escribí, hice un recopilatorio de recursos sobre ReactJS. Esos recursos son una buena fuente de información y un buen sitio por el que empezar. A mi particularmente me han venido muy bien.

Como podéis ver, aunque todavía hay poca información sobre la librería de Facebook, poco a poco empieza a calar en la comunidad española y encontramos muchos blogs con los primeros pasos a seguir. Sin embargo, no he encontrado artículos sobre lo que hoy quería contaros y que a mi particularmente me parece muy interesante por el control que la librería nos va a permitir sobre los componentes.

En este post quería hablaros sobre el ciclo de vida de un componente. Una de las cosas que nos va a facilitar la vida a la hora de saber en qué estado se encuentra un componente dentro de nuestra interfaz, es el uso de ciertas funciones predefinidas por el sistema, que se ejecutan siempre en el mismo orden y que ReactJS nos permite sobreescribir para que se ejecute nuestro código. Un código que, depende en que parte del ciclo de vida de un componente se encuentre, tendrá un sentido u otro. Espero que os guste la explicación:

Vida y milagro de un componente

Para empezar tendremos que decir que un componente siempre tendrá dentro de nuestra aplicación una vida, un desarrollo y una muerte. Esto la gente de Facebook lo ha bautizado como ciclo de vida de un componente y siempre se base en tres fases, que son: Inicialización, actualización y desmontaje del componente.

Lo bueno es que la cosa no se queda aquí ya que cada una de las fases tienen una serie de subfases que se corresponderá con cada uno de las funciones que podemos nosotros, como desarrolladores de un componente, sobreescribir para que tenga el comportamiento que nosotros deseemos. Empecemos a desgranar cada una de estas tres fases:

1. Inicialización

Un componente se encuentra en esta fase cuando hemos instanciado un componente que queremos que se muestre por pantalla o cuando un componente padre ha decidido renderizar dicho componente hijo. Dentro de la inicialización podemos realizar la preparación. Esta preparación puede ser tanto la inicialización de estados y propiedades como la obtención de datos de un servicio externo. La inicialización también se encarga de ‘montar’ el componente en pantalla.

Me gusta hacer hincapié en lo de ‘montar’ en vez de incluir nuestro componente en el DOM porque además de que es el término usado por Facebook para realizar esta acción, tenemos que saber que ReactJS es una librería que intenta ser independiente de la plataforma donde se renderice ya sea Web como aplicación nativa ya que para desarrolladores front web ‘montar’ será insertar HTML en el DOM, para desarrolladores de Android ‘montar’ será incluir el XML necesario en la vista de una aplicación nativa. En algún otro post hablaremos sobre lo que quiere conseguir Facebook sobre esto y sus planes de futuro.

Como decíamos, esta fase cuenta con una serie de subfases o ‘hooks’ que podemos sobreescribir. Haremos una breve descripción de lo que nos permite hacer cada uno de ellas, en esta fase tenemos cinco:

lifecycle_init

  • GetDefaultProps: esta función, nos permitirá inicializar propiedades que tengamos que tener con un valor por defecto en nuestro componente.
  • GetInitialState: al igual que en el anterior, esta función nos va a permitir inicializar diferentes variables de estado que tenga nuestro componente.
  • ComponentWillMount: como su nombre bien indica, esta función nos permitirá realizar acciones justamente que un componente se ‘monte’ en la interfaz. Nos puede ser muy útil para realizar validaciones de las propiedades con las que se ha instanciado o incluso para obtener modelos desde un servicio externo por medio de AJAX y cuyos datos pueda que tengan que ser mostrados.
  • Render: esta función es el hook más importante de todo componente y obligatorio por la librería (el resto de funciones, como habremos deducido,  son opcionales). Render se encarga de incluir el componente dentro de la interfaz y de instanciar e indicar la colocación del resto de componentes hijos.
  • ComponentDidMount: Como nos pasó con ComponentWillMount, podremos hacer acciones una vez que el componente se ha pintado en pantalla.

Para demostrar y comprobar que no nos equivocamos, vamos a crear el esqueleto de un componente muy simple que se encargue de mostrar por consola la ejecución de las fases explicadas:

Y si lo ejecutamos, aquí vemos la traza de la consola:

Captura.PNG

Como entiendo que el post es algo tedioso y teorico, creo que será mejor dejarlo aquí y explicar las otras fases en este otro post. Espero que os haya sido útil.

Nos leemos 🙂

Imagen post | Red Badger

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s