Estados de un componente en React Native
Estado
El estado es un objeto JavaScript que contiene datos que influyen en el aspecto de un componente en un área particular en un momento dado. El estado puede ser booleano, números, unidades de caracteres u objetos JavaScript más complejos. React brinda la posibilidad de convertir cualquier componente en un componente con estado implementando la variable de estado en componentes de clase o el useState Hook en componentes funcionales.
Componentes con estado y sin estado
El componente sin estado solo puede contener props, no estados. Un componente de este tipo se puede vincular con una función:
recibe una entrada (object ‘object’) y devuelve el resultado (React object).
Se utilizan componentes sin estado si desea incorporar props y no es necesario enlazar el componente. Son fáciles de usar y probar.
Un componente con estado en React Native es aquel que puede recibir props (propiedades) y también mantiene un estado interno. La parte “decente” del componente es la que controla su estado y puede modificarlo según las necesidades de la aplicación. Cuando un componente cambia de estado, se vuelve a renderizar para reflejar los cambios.
Los componentes oficiales son fundamentales en React Native. Ayudan a manejar la lógica de la aplicación y a responder a las acciones y entradas del usuario. Proporcionan una interacción flexible entre el usuario y la aplicación a través de la comunicación cliente-servidor. Además, son esenciales para crear páginas interactivas.
Los componentes de función normalmente no tienen estado, mientras que los componentes de clase añaden estados al componente. Sin embargo, esto ha cambiado con la introducción de los Hooks a los componentes. El estado era una de las ventajas más importantes de los componentes de clase, pero hoy los Hooks han agregado sistemas de administración de estado y de ciclo de vida a los componentes de función, por lo que también pueden denominarse componentes independientes.
- Los componentes de React se reinician si los props o las condiciones han cambiado.
Cualquier actualización desde cualquier parte del código cambia la redistribución de la parte apropiada de la interfaz de usuario. - Los props y las condiciones son objetos JS, lo que significa que ambos contienen muchas estructuras y métodos que necesitamos.
- La misma combinación de props y estados del componente debería producir el mismo resultado.
¿Qué es useState?
useState es un hook proporcionado por React que te permite agregar estado a tus componentes funcionales. Con él, puedes declarar variables de estado y actualizarlas en respuesta a eventos o cambios.
Cada vez que modificas el estado con useState, React se encarga de volver a renderizar el componente con los nuevos valores.
Inicialización del estado en el constructor del componente
La inicialización del estado en el constructor del componente y el uso posterior de setState son conceptos relacionados con la gestión del estado en React y React Native. Permíteme explicarte por qué se sigue esta práctica:
Inicialización del Estado en el Constructor
- En componentes de clase (no en componentes funcionales), el constructor es el lugar adecuado para inicializar el estado.
- Cuando creamos un componente, queremos establecer un estado inicial para que el componente se renderice correctamente en su primer ciclo de vida.
- El constructor se ejecuta solo una vez cuando se crea la instancia del componente. Por lo tanto, es el momento adecuado para configurar el estado inicial.
Estado en componente de clase
Aqui no utilizamos el constructor para inicializar el valor del state, lo debemos definir por fuera del constructor basados en la sintaxis alternativa, es decir, se declara el estado como una propiedad de la clase desde fuera del constructor
setState y actualización del Estado
- setState es el método que utilizamos para actualizar el estado en componentes de clase.
- Cuando llamamos a setState, React detecta el cambio en el estado y re-renderiza el componente con los nuevos valores.
- Si no inicializamos el estado en el constructor, podríamos encontrarnos con valores indefinidos o no deseados al intentar actualizarlo.
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
class Contador extends Component {
state = {
contador: 0,
};
handleIncrement = () => {
this.setState({ contador: this.state.contador + 1 });
};
render() {
return (
<View>
<Text>Contador: {this.state.contador}</Text>
<Button title="Incrementar" onPress={this.handleIncrement} />
</View>
);
}
}
export default Contador;
Hagamos una descripción rápida del ejercicio.
Importaciones:
- Importamos los componentes necesarios de
reactyreact-native. En este caso, utilizamosComponent,View,TextyButton.
Clase Contador:
- Creamos una clase llamada
Contadorque extiende la clase baseComponent. - El constructor inicializa el estado del componente con un contador inicial de
0. - También enlazamos el método
handleIncremental contexto actual para asegurarnos de que se ejecute correctamente cuando se presione el botón.
Método handleIncrement:
- Este método se ejecuta cuando se presiona el botón “Incrementar”.
- Actualiza el estado del contador sumando 1 al valor actual.
Renderizado:
- En el método
render(), definimos la estructura de la interfaz de usuario. - Mostramos el valor actual del contador utilizando el estado (
this.state.contador). - Agregamos un botón con el título “Incrementar” que llama al método
handleIncrementcuando se presiona.
Exportación:
- Exportamos el componente
Contadorpara que pueda ser utilizado en otros archivos.
Componentes funcionales y Hooks
- En los componentes funcionales, no tenemos un constructor. En cambio, utilizamos hooks como useState.
- useState nos permite declarar variables de estado directamente en el cuerpo del componente funcional.
- La inicialización del estado se realiza al declarar la variable de estado utilizando useState.
Componentes funcional y useState
El ejemplo clásico de un componente con estado es un Contador:
import React, { useState } from 'react';
export default function Counter() {
// Declaración del estado 'count' con valor inicial 0
const [count, setCount] = useState(0);
// Función para incrementar el contador
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Contador: {count}</p>
<button onClick={increment}>Incrementar</button>
</div>
);
}
En este ejemplo:
countes la variable de estado que almacena el valor actual del contador.setCountes la función que actualiza el estado. Al llamarla con un nuevo valor, React re-renderiza el componente con el valor actualizado.
ReactDOM es responsable de comparar todos los elementos del árbol UI con la versión anterior del árbol UI y actualizar solo los nodos cuyo contenido ha cambiado. Este paquete también permite integrar fácilmente el código React en aplicaciones web existentes, independientemente del idioma en el que estén escritas.
En resumen, useState es una herramienta poderosa para administrar el estado en componentes funcionales de React Native, y su uso nos permite crear aplicaciones más dinámicas y receptivas.
Conclusiones
- Control de Estado: useState es un hook que nos permite agregar una variable de estado a nuestros componentes funcionales. Esto nos permite mantener y actualizar datos que pueden cambiar durante la vida útil del componente.
- Inicialización en el Constructor: En general, debemos inicializar el estado en el constructor del componente y luego usar setState cuando queremos modificarlo. Por ejemplo, si deseamos crear un texto que parpadea constantemente, el propio texto se establece una vez al crear el componente (por lo que es un prop), mientras que el estado que controla si el texto está encendido o apagado debe mantenerse en el estado.
- Actualización del Estado: useState devuelve un par de valores: el estado actual y una función para actualizarlo. Por ejemplo, al escribir const [count, setCount] = useState(), estamos creando una variable count y una función setCount para actualizarla. Esto es similar a this.state.count y this.setState en una clase, pero en un par.
- Uso en Componentes Funcionales: Para agregar estado a un componente funcional, importamos useState y lo utilizamos.
- Alternativas a setState: En una aplicación real, no siempre usaremos un temporizador para establecer el estado. En su lugar, podemos modificar el estado cuando tengamos nuevos datos del servidor o entrada del usuario. Además, podemos utilizar contenedores de estado como Redux o MobX para controlar el flujo de datos. En ese caso, modificaremos el estado a través de Redux o MobX en lugar de llamar directamente a setState.
