Ciclo de vida de los componentes
¿Qué son los estados de un componente?
En React Native, los estados son objetos que contienen información sobre un componente que puede cambiar con el tiempo dado. Cuando el estado de un componente cambia, React Native vuelve a renderizar el componente para reflejar los cambios.
Los estados son una forma de almacenar información en un componente que puede cambiar con el tiempo. En general, se recomienda inicializar el estado en el constructor y luego llamar a setState cuando se desea cambiarlo.
¿Cómo se utilizan los estados de un componente?
Para agregar un estado a un componente, primero debes definir una variable de estado utilizando el método useState de React.
Ejemplo de cómo agregar un estado a un componente:
En este ejemplo, se define un componente de función llamado MyComponent. El componente utiliza el método useState para definir una variable de estado llamada count, que se inicializa en 0. El componente renderiza un componente Text que muestra el valor actual de count, así como un componente Button que permite al usuario incrementar el valor de count.
Cuando se llama a setCount, React Native actualiza el valor de count y vuelve a renderizar el componente para reflejar los cambios. De esta manera, los estados permiten crear componentes que son dinámicos e interactivos.
¿Qué es el ciclo de vida del componente?
El ciclo de vida del componente en React Native se refiere a los diferentes estados por los que pasa un componente desde que se crea hasta que se destruye.
Los componentes en React Native tienen un ciclo de vida que consta de tres fases principales: montaje, actualización y desmontaje.
Métodos de ciclo de vida
A su vez cada ciclo de vida nos va a proporcionar diferentes métodos de ciclo de vida para el componente.
Fase de montaje
El componente se crea al instanciarse y se agrega al árbol de componentes o también llamado DOM. Durante esta fase, se ejecutan los siguientes métodos:
constructor(props)
Este método se llama cuando se crea el componente y se utiliza para inicializar el estado y enlazar los métodos de clase.
- El constructor es llamado antes de ser montado el componente en el DOM. Es OBLIGATORIO pasar el argumento props.
- Al ser extendiendo React.Component, es OBLIGATORIO ejecutar el método super(props) pasándole el argumento props, antes que cualquier otra instrucción, ya que de no ser así, puede ocasionar errores.
- Es útil para inicializar el estado local (this.state).
- Es útil para enlazar manejadores de eventos a una instancia.
render()
Este método se llama para renderizar el componente en la pantalla
- El único método obligatorio en un componente de clase.
- Puede retornar un elemento en React a través de JSX (Ej. <div />, <MyComponent />, y es renderizado como un nodo DOM.
- Puede retornar fragmentos de elementos (útil cuando creamos tablas)
- Puede retornar el renderizado de un hijo como otro nodo DOM, llamados portales (es útil para sacarlo de un contenedor, ej. modales, tooltips).
- Puede retornar datos tipo String (cadenas de texto o números), que son renderizados como nodos de texto en el DOM.
- Se recomienda que la función sea pura, esto quiere decir que no modifique variables, propiedades o estado del componente, debe devolver siempre el mismo resultado cada vez que se invoca.
componentDidMount()
Este método se llama después de que el componente se haya montado en el árbol de componentes (DOM. Aquí es donde se pueden realizar tareas de inicialización, como cargar datos desde una API.
- Se invoca inmediatamente después que el componente se monte.
- Carga de datos de alguna API.
- Podemos modificar el estado (setState()), donde activará un renderizado extra; hay que tener cuidado de cómo ocuparlo, ya que puede afectar al rendimiento de la aplicación, es útil cuando debemos saber propiedades de algún nodo DOM (tamaño, posición) como un modal o tooltip.
- Para hacer suscripciones (no olvides darla de baja en componentWillUnmount).
Fase de actualización
En esta fase el componente se actualiza en respuesta a cambios en las props o el estado.
render()
- Todas las opciones que tiene cuando se monta.
- Cuando sufre algún cambio el componente y se necesita renderizar el componente (cuando se cambia el estado en componentDidMount()).
componentDidUpdate(prevProps, prevState)
- Se invoca inmediatamente después de que la actualización ocurra.
- Este método NO es llamado en el renderizado inicial.
- Es útil para para hacer solicitudes API, siempre y cuando se compare las propiedades (this.props) con el argumento prevProps, esto con el fin de que si no hay cambios, no afecte.
- Podemos modificar el estado (setState), pero, al igual que el punto anterior se debe comparar el actual this.state con el anterior prevState, ya que de lo contrario puedes generar un bucle infinito.
- Es útil cuando queremos realizar un efecto secundario (ej. obtención de datos o animaciones) en una respuesta debido a un cambio en los props.
Fase de desmontaje
El componente se elimina del árbol de componentes (DOM)
componentWillUnmount()
- Se invoca inmediatamente antes de desmontar y destruir el componente.
- Es útil para realizar limpieza de tareas (temporizadores, solicitudes de red, suscripciones)
PROHIBIDO modificar el estado (setState), ya que el componente se vuelve a renderizar. - Una vez que una instancia de componente sea desmontada, NUNCA será montada de nuevo, si volvemos a montar el componente va a ser una NUEVA instancia de él.
