"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Ciclo de vida de un componente en React

El ciclo de vida de un componente en React es los distintos estados por los que un componente va pasando mientras existe.

Estos estados suceden en un orden determinado según las acciones que ejecutemos sobre el componente, y además cada uno de esos estados se corresponde un método que el componente expone de forma nativa para que podamos definir nuestra lógica.

Vamos a enumerar las distintas acciones que se pueden dar en nuestro componente:

  1. Lo renderizamos
  2. Cambiamos alguna de sus propiedades
  3. Cambiamos su estado
  4. Lo destruimos

Ahora veamos cuales son los estados por los que pasa cuando se ejecuta alguno de estos casos.

Renderizarlo Cambiar propiedades Cambiar estado Destruirlo
 getDefaultProps  componentWillRecieveProps shouldComponentUpdate  componentWillUnmount
 getInitialState  shouldComponentUpdate componentWillUpdate
 componentWillMount  componentWillUpdate  render
 render  render  componentDidUpdate
 componentDidMount  componentDidUpdate

Como vemos el ciclo de vida de un componente está perfectamente definido en React y gracias a que todo esto son métodos podemos controlar lo que sucede en todo momento.

Vamos a hablar brevemente de ellas.

Renderizado

Según la tabla que tenemos el renderizado, puede llevar a error que le llame así porque realmente el componente se renderiza las veces que haga falta, nos estamos refiriendo al arranque del componete cuando se renderiza por primera vez.

Consta de 5 estados o pasos del ciclo de vida, hemos de entender que se ejecutan siempre por orden y de arriba hacia abajo.

El primero en el que entra es getDefaultProps, este es el punto donde se recogen las propiedades que establecemos por defecto de entrada.

Si usamos ES6 se establecen como una propiedad de nuestra clase…

Si en vez de eso programamos directamente en ES5 necesitaremos hacer uso de la función createReactClass y este estado del ciclo de vida pasa a ser una función que declaramos en el objeto de configuración.

Con el getInitialState pasa algo parecido, cuando usamos ES6 este punto del ciclo de vida se define en la propia función constructora de la clase.

Mientras que nuevamente en ES5 es una función que hay que declarar en el objeto que pasamos para configurar nuestro componente.

El resto de estados del ciclo de vida perteneciente al primer renderizado son funciones, (recordemos que un método de clase no deja de ser una función).

componentWillMount es el método del ciclo de vida que se ejecuta justo antes de que se renderize por primera vez el componente, en el podemos aprovechar para hacer todo el montaje previo a que se pinte en pantalla.

render sirve para definir el template del componente, dicho de forma simple es un metodo que devuelve el código html que el navegador va a pintar en la pantalla.

componentDidMount es un método que se ejecuta una vez se ha renderizado el componente por primera vez, en él tenemos la certeza que tanto el componente como todos lo hijos que cuelguen de él estan pintados y por tanto en el DOM de la página. Además solo se ejecuta del lado del cliente.

Vamos a ver un ejemplo de un componente con todos estos métodos definidos…

Para que veais que sigue el ciclo que acabamos de comentar he puesto mensajes en todos los métodos y en pantalla tenemos esto.

Hasta aquí este artículo, si quieres investigar más sobre el ciclo de vida y los distintos métodos para controlarlo puedes visitar la página oficial en este enlace.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)