Introducción
Los hooks son una característica introducida en React 16.8 que permiten usar el estado y otras características de React sin escribir una clase. En React Native, los hooks son igualmente poderosos y permiten manejar el estado, los efectos secundarios y otros aspectos de los componentes de manera más sencilla y funcional.
Objetivos del Módulo
- Comprender qué son los hooks y por qué son útiles.
- Aprender a usar los hooks más comunes:
useState
,useEffect
,useContext
. - Implementar hooks personalizados para reutilizar lógica de estado.
¿Qué son los Hooks?
Los hooks son funciones que te permiten "enganchar" características de React como el estado y el ciclo de vida en componentes funcionales. Los hooks más comunes son:
useState
: Permite agregar estado local a un componente funcional.useEffect
: Permite realizar efectos secundarios en componentes funcionales.useContext
: Permite acceder al contexto en componentes funcionales.
useState
El hook useState
permite agregar estado local a un componente funcional. Aquí hay un ejemplo básico:
import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; const Counter = () => { const [count, setCount] = useState(0); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => setCount(count + 1)} /> </View> ); }; export default Counter;
Explicación del Código
- Importación de
useState
: ImportamosuseState
desde React. - Declaración del Estado:
const [count, setCount] = useState(0);
inicializa el estadocount
a 0 y proporciona una funciónsetCount
para actualizarlo. - Uso del Estado:
count
se muestra en un componenteText
y se actualiza cuando se presiona el botón.
useEffect
El hook useEffect
permite realizar efectos secundarios en componentes funcionales, como la obtención de datos, la suscripción a eventos o la manipulación del DOM.
import React, { useState, useEffect } from 'react'; import { View, Text } from 'react-native'; const Timer = () => { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(prevSeconds => prevSeconds + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <View> <Text>Seconds: {seconds}</Text> </View> ); }; export default Timer;
Explicación del Código
- Importación de
useEffect
: ImportamosuseEffect
desde React. - Uso de
useEffect
:useEffect
se ejecuta después de que el componente se monta. En este caso, establece un intervalo que incrementaseconds
cada segundo. - Limpieza: La función de limpieza
return () => clearInterval(interval);
se ejecuta cuando el componente se desmonta para limpiar el intervalo.
useContext
El hook useContext
permite acceder al contexto en componentes funcionales. Aquí hay un ejemplo básico:
import React, { useContext } from 'react'; import { View, Text } from 'react-native'; const ThemeContext = React.createContext('light'); const ThemedComponent = () => { const theme = useContext(ThemeContext); return ( <View> <Text>Current Theme: {theme}</Text> </View> ); }; const App = () => { return ( <ThemeContext.Provider value="dark"> <ThemedComponent /> </ThemeContext.Provider> ); }; export default App;
Explicación del Código
- Creación del Contexto:
const ThemeContext = React.createContext('light');
crea un contexto con un valor predeterminado de 'light'. - Uso de
useContext
:const theme = useContext(ThemeContext);
obtiene el valor del contexto. - Provisión del Contexto:
ThemeContext.Provider
proporciona el valor 'dark' al contexto.
Hooks Personalizados
Los hooks personalizados permiten encapsular y reutilizar lógica de estado. Aquí hay un ejemplo de un hook personalizado para manejar un contador:
import { useState } from 'react'; const useCounter = (initialValue = 0) => { const [count, setCount] = useState(initialValue); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); const reset = () => setCount(initialValue); return { count, increment, decrement, reset }; }; export default useCounter;
Uso del Hook Personalizado
import React from 'react'; import { View, Text, Button } from 'react-native'; import useCounter from './useCounter'; const CounterComponent = () => { const { count, increment, decrement, reset } = useCounter(10); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={increment} /> <Button title="Decrement" onPress={decrement} /> <Button title="Reset" onPress={reset} /> </View> ); }; export default CounterComponent;
Explicación del Código
- Creación del Hook Personalizado:
useCounter
encapsula la lógica del contador. - Uso del Hook Personalizado:
const { count, increment, decrement, reset } = useCounter(10);
utiliza el hook personalizado en un componente funcional.
Ejercicios Prácticos
Ejercicio 1: Contador con useState
Instrucciones: Crea un componente que tenga dos botones, uno para incrementar y otro para decrementar un contador. Usa el hook useState
.
Solución:
import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; const Counter = () => { const [count, setCount] = useState(0); return ( <View> <Text>Count: {count}</Text> <Button title="Increment" onPress={() => setCount(count + 1)} /> <Button title="Decrement" onPress={() => setCount(count - 1)} /> </View> ); }; export default Counter;
Ejercicio 2: Temporizador con useEffect
Instrucciones: Crea un componente que muestre un temporizador que se incremente cada segundo. Usa el hook useEffect
.
Solución:
import React, { useState, useEffect } from 'react'; import { View, Text } from 'react-native'; const Timer = () => { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(prevSeconds => prevSeconds + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <View> <Text>Seconds: {seconds}</Text> </View> ); }; export default Timer;
Ejercicio 3: Tema con useContext
Instrucciones: Crea un componente que use un contexto para cambiar el tema entre 'light' y 'dark'. Usa el hook useContext
.
Solución:
import React, { useContext } from 'react'; import { View, Text, Button } from 'react-native'; const ThemeContext = React.createContext('light'); const ThemedComponent = () => { const theme = useContext(ThemeContext); return ( <View> <Text>Current Theme: {theme}</Text> </View> ); }; const App = () => { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={theme}> <ThemedComponent /> <Button title="Toggle Theme" onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')} /> </ThemeContext.Provider> ); }; export default App;
Conclusión
En esta sección, hemos aprendido sobre los hooks en React Native, incluyendo useState
, useEffect
, y useContext
. También hemos visto cómo crear hooks personalizados para encapsular y reutilizar lógica de estado. Los hooks son una herramienta poderosa que simplifica la gestión del estado y los efectos secundarios en componentes funcionales, haciendo que el código sea más limpio y fácil de entender.
Próximos Pasos
En el siguiente módulo, exploraremos la optimización del rendimiento en React Native, donde aprenderemos técnicas y estrategias para hacer que nuestras aplicaciones sean más rápidas y eficientes.
Curso de React Native
Módulo 1: Introducción a React Native
- ¿Qué es React Native?
- Configuración del Entorno de Desarrollo
- Aplicación Hola Mundo
- Entendiendo JSX
- Componentes y Props
Módulo 2: Componentes Básicos y Estilizado
- Visión General de Componentes Básicos
- Texto, Vista e Imagen
- Estilizado con Flexbox
- Manejo de Entrada del Usuario
- ScrollView y ListView
Módulo 3: Estado y Ciclo de Vida
- Métodos de Estado y Ciclo de Vida
- Manejo de Eventos
- Renderizado Condicional
- Listas y Claves
- Formularios y Componentes Controlados
Módulo 4: Navegación
- Introducción a React Navigation
- Navegador de Pila
- Navegador de Pestañas
- Navegador de Cajón
- Pasando Parámetros a Rutas
Módulo 5: Redes y Datos
- Obteniendo Datos con Fetch API
- Usando Axios para Solicitudes HTTP
- Manejo de Errores de Red
- AsyncStorage para Datos Locales
- Integración con APIs REST
Módulo 6: Conceptos Avanzados
Módulo 7: Despliegue y Publicación
- Construyendo para iOS
- Construyendo para Android
- Publicando en App Store
- Publicando en Google Play
- Integración y Entrega Continua