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

ZB8O0DL

En anteriores post os expliqué los recursos con los que empecé a aprender sobre ReactJS y me atreví con mi primer post original sobre ReactJS explicandoos cómo podemos hacer uso del ciclo de vida de un componente.

Como os dije, no quería hacer ese post demasiado largo y decidí dejar la actualización y el desmontaje (‘unmount’) de un componente para el post que tenemos hoy aquí. Espero que os guste tanto como el anterior:

2. Actualización

Un componente entra en esta fase cada vez que se produce un cambio en los atributos que caracterizan a un componente. Como sabemos un componente cuenta de dos tipos de atributos: los que corresponden al estado interno del componente o conocidos en React como ‘state’ y los que corresponden a las propiedades del componente o también conocidos en React como ‘props’ (Si quieres saber más sobre ‘props’ y ‘state’, no dudes en visitar este artículo)

Como vemos, React cuenta con un ciclo de vida diferente dependiendo de si la actualización se realiza sobre un atributo incluido en el ‘state’ o si el componente ha recibido un nuevo ‘props’ diferente al que contenía (como sabemos los ‘props’ son inmutables y no pueden ser modificados dentro del componente al que pertenecen).

El ciclo de vida cuando se actualiza un ‘state’ cuenta de estas 4 subfases:

lifecycle_state

  • ShouldComponentUpdate: este método que podemos sobreescribir es muy interesante porque nos permite indicar si es necesario que el componente se tiene que volver a renderizar o no. Nos puede venir muy bien para evitar ciertos renderizados. Lógicamente se ejecuta antes que el método render y obviamente no se ejecuta cuando se inicializa un componente. Siempre debemos devolver un booleano indicando si el componente tiene que actualizarse o no.
  • ComponentWillUpdate: si en el anterior método hemos retornado un valor ‘true’, se ejecutará este otro. Este método nos es útil para modificar o registrar eventos producidos por el cambio del anterior estado.
  • Render: Es el método que tienen casi todas las fases y que permite la creación y la estructura del componente.
  • ComponentDidUpdate: al igual que el método Component-WillUpdate, nos sirve para preparar algún estado o elemento una vez que el componente ya se ha renderizado e insertado en el DOM.

Cuando un ‘prop’ del componente es modificado se podrucen las siguientes subfases:

lifecycle_props

La única que nos queda por explicar es la subfase o método ‘componentWillRecieveProps‘ que nos permite cambiar un estado dependiendo de la nueva propiedad proporcionada.

3. Desmontaje

El desmontaje o ‘unmount’ se produce cuando un componente es eliminado de la interfaz. Antes de que se produzca esto. React ejecuta un método denominado ‘componentWillUnmount‘ y que nos servirá para realizar operación de desactivación de diferentes elementos. Un ejemplo muy común pueda ser el limpiar una caché interna que tuviese el componente o cerrar la conexión de un socket que tuviese el componente.

Conclusión

Como podéis comprobar, estos métodos nos van ayudar más a poder controlar el comportamiento de nuestros componentes y a poder realizar ciertas acciones sobre ellos y sus ‘state’ y ‘props’.

Es importante conocerlos para exprimir al máximo la potencia que nos ofrece ReactJs y es bueno tener en mente qué sentido tiene cada uno y cuando puede ayudarnos.

Espero que os haya gustado.

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