Saltar al contenido

ReactJS: Ciclo de vida de un componente

Despu茅s de haber comenzado con聽ReactJS: Instalar todo lo necesario para empezar聽e聽Introducci贸n a ReactJS, vamos a ir un poco m谩s profundo en c贸mo funcionan los componentes de React.

Cuando creamos un componente e interactuamos con el pasa por un ciclo de vida. Si conocemos que pasa en cada paso podemos aprovechar de hacer modificaciones o reaccionar a ciertos eventos para hacer nuestro componente y aplicaci贸n comportarse como queremos.

Vamos a ver 3 ciclos:

  1. Inicializaci贸n del componente
  2. Actualizaci贸n del componente
  3. Destrucci贸n del componente

Y veremos en cada ciclo que m茅todos son llamados y que propiedades est谩n disponibles.

1. Inicializaci贸n del Componente

Esta es la fase inicial donde el componente es creado.

Los m茅todos y triggers que son llamados durante esta fase son:

  1. getInitialState
  2. getDefaultProps
  3. componentWillMount
  4. render
  5. componentDidMount

getInitialState

Este es llamado s贸lo una vez antes de que el componente se monte. Regresar谩 el valor inicial de this.state.

getDefaultProps

Solo se invoca una sola vez y es guardado en cache cuando el componente es creado. Los valores ser谩n guardados en this.props.

Como es invocado antes de la creaci贸n de cualquier instancia no puede depender en los valores anteriores de this.props.

componentWillMount

Invocado solo una vez justo antes que se llame al render del componente, tanto en el cliente como en servidor, si se coloca un valor de estado (this.state) dentro de este m茅todo no provocar谩 una actualizaci贸n.

render

Este m茅todo retorna el componente como tal para su visualizaci贸n, sino quieres que se muestra nada debes retornar null o false. Es el 煤nico m茅todo requerido siempre por los componentes.

Esta funci贸n debe ser pura, lo que quiere decir que no debe modificar el estado del componente y que regresar谩 el mismo resultado cada vez que se llame. Tampoco debe leer o escribir directamente al DOM o interactuar con el navegador, para este tipo de intereacciones se pueden utilizar otros m茅todos como por ejemplo componentDidMount().

componentDidMount

Tambi茅n se invoca una sola vez, s贸lo en el cliente, y es llamado inmediatamente despu茅s de la vizualizaci贸n inicial (realizada por la funci贸n render). En este m茅todo ya puedes acceder a cualquier referencia de los componentes hijos, el m茅todo componentDidMount de los hijos es siempre llamado antes que el de los padres.

En este m茅todo puedes integrar otros frameworks de Javascript, colocar timers con setTimeOut o setInterval o hacer llamadas AJAX.

Aqu铆 finaliza la fase de inicializaci贸n y el componente deber铆a ya mostrarse en nuestro navegador.

2. Actualizaci贸n

La fase de actualizaci贸n pasa o cuando hay nuevos props o cuando cambia el estado.

  1. componentWillRecieveProps (solo cuando hay nuevos props)
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

componentWillRecieveProps

S贸lo es llamado cuando un componente est谩 recibiendo nuevos props. Podemos utilizar este m茅todo para actualizar el estado (this.state) sabiendo que va a haber un cambio en los props.

Los valores antiguos de los props se pueden acceder con this.props ya que a煤n no se han actualizado.

Este m茅todo recibe como par谩metros los valores de los props a actualizar.

Por ejemplo:

componentWillReceiveProps: function(nuevosProps) {
  this.setState({
    votos: nuevosProps.votos > this.props.votos
 });

Nota importante: NO implica que un cambio de estado vaya a generar un cambio en los props.

Este m茅todo NO es llamado cuando hay un cambio de estado.

shouldComponentUpdate

Es llamado antes de render cuando son recibidos nuevos props o estados. Este m茅todo por defecto retorna true, pero si estamos seguro que la actualizaci贸n de los props o el estado no requiere que se actualice el componente puedes sobreescrbirlo y retornar false, en cuyo caso no se llamara a m茅todo render hasta el pr贸ximo cambio y tampoco se llamar谩n a los m茅todos componentWillUpdate y componentDidUpdate.

Aqu铆 es donde es importante la inmutabilidad del estado del componente, en este m茅todo podemos hacer comparaciones entre los cambios y ver si es necesario actualizar o no. Esto nos permite obtener mejor rendimiento y menos uso de nuestros recursos.

Por ejemplo podemos verificar si no hubo cambios en nuestro props y si es as铆 no actualizar.

shouldComponentUpdate: function(nuevosProps, nuevoEstado) {
  return nuevosProps.id !== this.props.id;
}

Tambi茅n como se muestra tenemos acceso al nuevoEstado, por lo que podemos hacer otras comparaciones y ver si es necesario actualizar o no.

Este m茅todo no se llama en la inicializaci贸n.

componentWillUpdate

Se llama justo antes de llamar a render(), cuando se reciben los nuevos props o estados. Aqu铆 podemos hacer preparaciones antes de que ocurra la actualizaci贸n.

Es importante saber que NO podemos utilizar this.setState() en este m茅todo, si necesitamos cambiar el estado debido a un cambio en los props debemos usar el m茅todo componentWillReceiveProps que vimos anteriormente.

Ejemplo:

componentWillUpdate: function(nuevosProps, nuevoEstado) {
  ...
}

Este m茅todo no se llama en la inicializaci贸n.

render

Es igual al que vimos en la fase de inicializaci贸n y es donde se crea el componente como tal.

componentDidUpdate

Se llama justo despu茅s de render despu茅s que todos los cambios han sido hechos en el DOM. Puedes utilizar este componente para hacer alguna operaci贸n el DOM despu茅s que el componente se haya actualizado.

componentDidUpdate: function(anteriorProps, anteriorEstado) {
  ...
}

3. Destrucci贸n

Esta es la 煤ltima fase y es cuando el componente se destruye y consiste en un s贸lo m茅todo.

componentWillUnmount

Es llamado justo antes de que el componente sea removido del DOM, es 煤til para hacer cualquier operaci贸n de limpieza, tales como invalidar timers, eliminar elementos que se hayan creados durante componentDidMount y cualquier otra operaci贸n pendiente.

Conclusi贸n

Siempre es importante conocer por cuales ciclos de vida pasa cualquier elemento de nuestra aplicaci贸n, muchas veces tratamos de realizar operaciones donde no corresponde, o queremos evitar que pasen ciertos eventos cuando se cumplen ciertos valores, o queremos acceder a datos antes de que se muestren y todo lo podemos hacer con los m茅todos que vimos.

Como siempre si tienen cualquier duda o sugerencia siempre son bienvenidos los comentarios.