Descubra cómo los Hooks pueden ayudarle a crear una aplicación React
Hooks es una característica que se introducirá en React 16.7 y cambiará la forma en que escribimos aplicaciones React en el futuro.
Antes de que aparecieran los Hooks, algunas funciones clave de los componentes solo eran posibles mediante componentes de clase: tener su propio estado y utilizar eventos de ciclo de vida. Los componentes de función, más livianos y flexibles, tenían una funcionalidad limitada.
Los ganchos permiten que los componentes de función tengan estado y respondan a eventos del ciclo de vida , y hacen que los componentes de clase queden obsoletos. También permiten que los componentes de función tengan una buena manera de manejar eventos.
Estado de acceso
Con la useState()
API, puedes crear una nueva variable de estado y tener una forma de modificarla. useState()
acepta el valor inicial del elemento de estado y devuelve una matriz que contiene la variable de estado y la función que llamas para modificar el estado. Dado que devuelve una matriz, utilizamos la desestructuración de matrices para acceder a cada elemento individual, de esta manera:const [count, setCount] = useState(0)
He aquí un ejemplo práctico:
import { useState } from 'react'const Counter = () = { const [count, setCount] = useState(0) return ( div pYou clicked {count} times/p button onClick={() = setCount(count + 1)}Click me/button /div )}ReactDOM.render(Counter /, document.getElementById('app'))
Puedes agregar tantas useState()
llamadas como quieras para crear tantas variables de estado como quieras. Solo asegúrese de llamarlas en el nivel superior de un componente (no en un if
bloque ni en ningún otro).
Ejemplo en Codepen:
Ganchos de ciclo de vida de acceso.
Otra característica muy importante de Hooks es permitir que los componentes de función tengan acceso a los ganchos del ciclo de vida.
Al utilizar componentes de clase, puede registrar una función en los componentDidMount
eventos componentWillUnmount
y componentDidUpdate
, y estos servirán para muchos casos de uso, desde la inicialización de variables hasta llamadas API y limpieza.
Los ganchos proporcionan la useEffect()
API. La llamada acepta una función como argumento.
La función se ejecuta cuando el componente se renderiza por primera vez y en cada nueva renderización o actualización posterior. React primero actualiza el DOM y luego llama a cualquier función que se le pase useEffect()
. Todo esto sin bloquear la renderización de la interfaz de usuario ni siquiera en el código de bloqueo, a diferencia de los antiguos componentDidMount
y componentDidUpdate
, lo que hace que nuestras aplicaciones parezcan más rápidas.
Ejemplo:
const { useEffect, useState } = Reactconst CounterWithNameAndSideEffect = () = { const [count, setCount] = useState(0) const [name, setName] = useState('Flavio') useEffect(() = { console.log(`Hi ${name} you clicked ${count} times`) }) return ( div p Hi {name} you clicked {count} times /p button onClick={() = setCount(count + 1)}Click me/button button onClick={() = setName(name === 'Flavio' ? 'Roger' : 'Flavio')} Change name /button /div )}ReactDOM.render( CounterWithNameAndSideEffect /, document.getElementById('app'))
El mismo componentWillUnmount
trabajo se puede lograr devolviendo opcionalmente una función desde nuestro useEffect()
parámetro: Foro ciclismo
useEffect(() = { console.log(`Hi ${name} you clicked ${count} times`) return () = { console.log(`Unmounted`) }})
useEffect()
se puede llamar varias veces, lo que es útil para separar la lógica no relacionada (algo que afecta los eventos del ciclo de vida de los componentes de clase).
Dado que las useEffect()
funciones se ejecutan en cada nueva actualización o renderización, podemos indicarle a React que omite una ejecución, por motivos de rendimiento, agregando un segundo parámetro que es una matriz que contiene una lista de variables de estado a tener en cuenta. React solo volverá a ejecutar el efecto secundario si uno de los elementos de esta matriz cambia.
useEffect( () = { console.log(`Hi ${name} you clicked ${count} times`) }, [name, count])
De manera similar, puedes indicarle a React que solo ejecute el efecto secundario una vez (en el momento del montaje), pasando una matriz vacía:
useEffect(() = { console.log(`Component mounted`)}, [])
useEffect()
Es ideal para agregar registros, acceder a API de terceros y mucho más.
Ejemplo en Codepen:
Habilite la comunicación entre componentes mediante ganchos personalizados.
La capacidad de escribir tus propios ganchos es la característica que alterará significativamente la forma en que escribes aplicaciones React en el futuro.
Al usar ganchos personalizados, tiene una forma más de compartir el estado y la lógica entre los componentes, lo que agrega una mejora significativa a los patrones de las propiedades de renderizado y los componentes de orden superior. Los cuales siguen siendo excelentes, pero ahora con los ganchos personalizados tienen menos relevancia en muchos casos de uso.
¿Cómo crear un gancho personalizado?
Un gancho es una función que comienza convencionalmente con use
. Puede aceptar una cantidad arbitraria de argumentos y devolver lo que desee.
Ejemplos:
const useGetData() { //... return data}
o
const useGetUser(username) { //...const user = fetch(...) //...const userData = ... return [user, userData]}
En sus propios componentes, puede utilizar el gancho de la siguiente manera:
const MyComponent = () = { const data = useGetData() const [user, userData] = useGetUser('flavio') //...}
El momento exacto en el que se deben agregar ganchos en lugar de funciones regulares debe determinarse en función de cada caso de uso, y solo la experiencia lo dirá.
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Introducción a los Hooks de React
Hooks es una característica que se introducirá en React 16.7 y cambiará la forma en que escribimos aplicaciones React en el futuro. Descubra cómo los Hooks
programar
es
https://aprendeprogramando.es/static/images/programar-introduccion-a-los-hooks-de-react-1859-0.jpg
2024-10-29