4 React Native - Hooks

R E A C T N AT I V E
M. C. HORACIO AUGUSTO NAVARRO Hooks

GARCÍA
Los Hooks son una nueva incorporación de React.Js que permite utilizar los estados y otras características
de React.Js sin crear un componente de clase.
Estos Hooks son compatibles con versiones anteriores, son complementos opcionales que ya están
disponibles.
Los Hooks permiten reutilizar la lógica de estados sin cambiar la jerarquía de componentes; también
permiten dividir un componente en funciones más pequeñas basándose en las piezas relacionadas.
¿Por qué una característica de React.Js si desarrollamos con React Native?
Recordemos que React Native esta basado en React.Js, los estados son el mecanismo mediante el cual
podemos colocar una “variable” en un componente, dado que las aplicaciones pueden llegar a
necesitar de esa entrada de datos, el manejo mediante Hooks es más sencillo.
Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde
componentes funcionales. Los Hooks no funcionan dentro de las clases — te permiten usar React sin
clases.
React proporciona algunos Hooks incorporados como useState. También puedes crear tus propios
Hooks para reutilizar el comportamiento con estado entre diferentes componentes.
Finalmente los Hook tienen dos reglas que se deben cumplir.
Referencia oficial de los Hooks

https://es.reactjs.org/docs/hooks-reference.html
 Llama Hooks solo en el nivel superior
No llames Hooks dentro de ciclos, condicionales o funciones anidadas. En vez de eso, usa siempre Hooks
en el nivel superior de tu función en React. Siguiendo esta regla, te aseguras de que los Hooks se llamen
en el mismo orden cada vez que un componente se dibuja. Esto es lo que permite a React preservar
correctamente el estado de los Hooks entre multiples llamados a useState y useEffect.
 Llama Hooks solo en funciones de React
No llames Hooks desde funciones JavaScript regulares. En vez de eso, puedes:
 Llama Hooks desde componentes funcionales de React.

 Llama Hooks desde Hooks personalizados.
useState
Devuelve un valor con estado y una función para actualizarlo.
Sintaxis
const [state, setState] = useState(estadoIncial);
Ejemplo
const [contador,setContandor] = useState(0);
Durante el renderizado inicial, el estado devuelto es el valor del primer argumento pasado (estadoInicial),
para nuestro ejemplo 0.
La función setState se usa para actualizar el estado. Acepta un valor de estado y sitúa en la cola una
nueva renderización del componente, para nuestro ejemplo la función setContador.
Invocación
setState(valorNuevo)  setContador(contador+1)
Ejemplo
const [count,setCount] = useState(0);
Definimos un estado que se llama count y una función setCount que será la que al momento de invocar
actualice el valor del estado con el parámetro que pasamos; el valor inicial de nuestro estado contador
será 0.
Invocación
setCount(count=>count+1)
Después de la llamada a la función setCount, el valor de nuestro estado se actualiza con el valor que
regresa la función count=>count+1.
Este Hook es el equivalente al del ejercicio del contador.

Practiquemos un poco
Hagamos el siguiente ejercicio: una aplicación que reciba un número y calcule su factorial.
Antes de iniciar debemos hacer un análisis basándonos en las etapas que ya vimos, una vez que hemos
creado nuestro proyecto.
1. Identificamos los estados que necesitamos

2. Realizamos el diseño de la UI tomando en cuenta los estados
3. Identificamos los métodos que asociaremos a los eventos
4. Identificamos las funciones o métodos extras
5. Implementamos
6. Probamos
Los estados identificados son:
• Factorial
• Numero
El diseño de la interfaz es el siguiente:

Métodos y funciones
• Necesitamos un método setState para cada estado.

• Una función para calcular el factorial.
Asociaciones
• Asociaremos el método onChangeText del TextInput para almacenar el

número en el estado número mediante el método setNumero.
• Asociaremos la función para calcular el factorial y almacenar el valor del
estado factorial mediante setFactorial; al método onPress del botón.
Hagamos el siguiente ejercicio: un juego donde el usuario adivine el número secreto generado de forma
aleatoria.

5. Implementamos
6. Probamos
El diseño de la interfaz es el siguiente:
• Numero secreto
• Número leído
• Estado del juego
• Intentos del usuario
• Bloque del número de intentos (lo descubrí al probarlo)
• Un método setState para afectar el valor de cada estado.

• Una función para evaluar si gana o pierde y la relación del número con el número
secreto.
• Una función para definir la imagen que se mostrará: más, menos, gana, pierde.
• Una función para reiniciar el juego.
Asociaciones
• Asociamos la función para evaluar al método onPress del botón evaluar, dentro
de esta función se utilizan los métodos setEstadoJuego, setIntentosUsuario y
setEditarMaxIntentos.
• Asociamos la función reiniciar al botón volver a jugar (aparece cuando terminas) y
dentro de esta función utilizamos los métodos setSecreto, setEstadoJuego,
setEditarMaxIntentos, setIntentosUsuario y setNumero.
• La función para la imagen regresa un componente Image con la imagen que
debe mostrar de acuerdo al estado del juego.
¿Qué sucede con las imágenes que se utilizan para la
interfaz?
Para utilizar imágenes en nuestros proyectos debemos hacer

lo siguiente, de acuerdo a la forma de trabajo: local o snack.
• Local: copiamos los archivos de la imagen a la carpeta

assets de nuestro proyecto. (puede ser otra
carpeta).
• Snack: importamos los archivos a nuestro poyecto y

los arrastramos a la carpeta assets.
Local
Snack
Se define al inicio la
función getSecreto para
poder utilizarla al
momento de inicializar
el estado
Hagamos el siguiente ejercicio: un juego de gato.

5. Implementamos
6. Probamos
Diseño de interfaz:
• Estado de casilla (ocupado/vacía) x9

• Turno (circulo o cruz)
• Ganador
• Empate
• Un método setState para afectar el valor de cada estado.

• Una función para crear las casillas.
• Una función para cuando se presione cada casilla.
• Una función para cambiar de turno.
• Una función para imprimir el texto del ganador. (O / X)
• Una función para volver a jugar
Asociaciones
• Asociamos la función al presionar la casilla al método onPress de la casilla,

dentro de esta función se utilizan los métodos setCasilla y siguiente. (se repite
para las 9 casillas)
• Dentro de la función siguiente evaluamos si hay un ganador y utilizamos los
métodos setGanador, setEmpate y setTurno.
• La función ganador regresa el texto que será mostrado en caso de que exista un
ganador.
• Asociamos la función limpiar al método onPress del botón limpiar y utilizamos
los métodos setCasilla (para las 9), setGanador, setTurno y setEmpate.

4 React Native - Hooks

Cargado por

Copyright:

Formatos disponibles

4 React Native - Hooks

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4 React Native - Hooks

Cargado por

Copyright:

Formatos disponibles

R E A C T N AT I V E

M. C. HORACIO AUGUSTO NAVARRO Hooks

¿Por qué una característica de React.Js si desarrollamos con React Native?

Finalmente los Hook tienen dos reglas que se deben cumplir.

Referencia oficial de los Hooks

 Llama Hooks solo en funciones de React

No llames Hooks desde funciones JavaScript regulares. En vez de eso, puedes:

 Llama Hooks desde componentes funcionales de React.

const [state, setState] = useState(estadoIncial);

const [contador,setContandor] = useState(0);

const [count,setCount] = useState(0);

Este Hook es el equivalente al del ejercicio del contador.

1. Identificamos los estados que necesitamos

El diseño de la interfaz es el siguiente:

• Necesitamos un método setState para cada estado.

• Asociaremos el método onChangeText del TextInput para almacenar el

1. Identificamos los estados que necesitamos

Los estados identificados son:

• Un método setState para afectar el valor de cada estado.

Para utilizar imágenes en nuestros proyectos debemos hacer

• Local: copiamos los archivos de la imagen a la carpeta

• Snack: importamos los archivos a nuestro poyecto y

1. Identificamos los estados que necesitamos

Los estados identificados son:

• Estado de casilla (ocupado/vacía) x9

• Un método setState para afectar el valor de cada estado.

• Asociamos la función al presionar la casilla al método onPress de la casilla,

También podría gustarte