Es posible que ya conozca los ganchos de React e incluso los ganchos básicos que ofrece el marco. Los Hooks te permiten administrar el estado y otras características sin tener que escribir una clase. Los ganchos básicos son useState, useEffect, y useContext. En este artículo, aprenderá sobre algunos ganchos adicionales que agregan un comportamiento más complicado.

Los ganchos adicionales que aprenderá son useRef y useMemo.

useRef

los useRef La función devuelve un objeto ref mutable e inicializa su .Actual propiedad al argumento pasado. La gente a menudo confunde el uso de useRef gancho con useState gancho. Puede indicar a este gancho que contenga la referencia de un Elemento HTML. Con esta referencia, puede manipular fácilmente ese elemento.

los useRef hook tiene solo una propiedad: .Actual. React no vuelve a renderizar la página cuando cambia su elemento. Tampoco se vuelve a renderizar si cambia el valor de.Actual propiedad. Entendamos el uso de este gancho con un ejemplo:

importar React, {useState, useRef} de 'reaccionar';





instagram viewer


exportar aplicación de función predeterminada () {
cuenta constante = useRef (nulo);
const [número, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value <10) {
count.current.style.backgroundColor = "rojo";
} demás {
count.current.style.backgroundColor = "verde";
}
};
regreso (


Ingrese un número mayor que 10

ref = {count}
tipo = "texto"
valor = {número}
onChange = {(e) => setNumber (e.target.value)}
/>
 checkNumber ()}> Haga clic en



);
}

En el código anterior, el color del elemento de entrada cambia de acuerdo con el número que ingresa en el cuadro de entrada. Primero, asigna el resultado de la useRef () gancho al contar variable. Hay dos elementos: entrada y botón. El elemento de entrada tiene el valor de la número y el árbitro propiedad de la etiqueta de entrada es contar para que coincida con la variable.

Al hacer clic en el botón, el verifique el número() se llama a la función. Esta función comprueba si el valor de la número es mayor que 10. Entonces establece el color de fondo del elemento de entrada utilizando el count.current.style.backgroundColor propiedad.

Relacionado: Conceptos básicos de CSS: trabajar con colores

useMemo

El gancho useMemo volverá a calcular un valor en caché cuando cambie alguna de sus dependencias. Esta optimización ayuda a evitar costosos cálculos en cada render.

La sintaxis del useMemo gancho es el siguiente:

const memoizedValue = useMemo (() => computeExpensiveValue (a), [a]);

Para una mejor comprensión, consideremos un ejemplo. El siguiente código alterna los colores de dos títulos. Llama al useState gancho para realizar un seguimiento de sus valores. Una función muestra si el color es caliente o frío según su valor. Antes de devolver el estado del color, hay un bucle while que se detiene durante aproximadamente un segundo. Esto es para fines de demostración, para explicar el beneficio de la useMemo gancho.

importar React, {useState, useMemo} de 'reaccionar';
exportar aplicación de función predeterminada () {
const [color1, setColor1] = useState ("azul");
const [color2, setColor2] = useState ("verde");
const toggleColor1 = () => {
devolver color1 "azul"? setColor1 ("rojo"): setColor1 ("azul");
};
const toggleColor2 = () => {
color2 "verde"? setColor2 ("naranja"): setColor2 ("verde");
};
const displayColor = () => {
var ahora = nueva Fecha (). getTime ();
while (new Date (). getTime () devolver color1 "azul"? "calor agradable";
};
regreso (


Color del texto 1: {color1}

Es de color {displayColor ()}

Cambiar color
Color del texto 2: {color2}

Cambiar color



);
}

Cuando haces clic en toggleButton1, debería notar un ligero retraso mientras cambia el estado. Observe que también hay un retraso cuando hace clic en toggleButton2. Pero esto no debería suceder, ya que la pausa de un segundo ocurre en displayColor. En esta página, los botones deben poder actuar de forma independiente. Para lograr esto, puede utilizar el useMemo gancho.

Necesitas envolver el displayColor función en el useMemo gancho y pase color1 en la matriz de dependencia.

const displayColor = useMemo (() => {
var ahora = nueva Fecha (). getTime ();
while (new Date (). getTime () devolver color1 "azul"? "calor agradable";
}, [color1]);

los useMemo hook toma una función y las dependencias como parámetros. los useMemo hook se renderizará solo cuando cambie una de sus dependencias. Es útil en situaciones en las que tiene que buscar desde una API.

Qué hacer a continuación después de aprender Hooks

Los Hooks son una característica muy poderosa y se usan comúnmente en proyectos de React. Proporcionan un gran potencial de optimización. Puede practicar ganchos construyendo proyectos pequeños como formularios o contadores de reloj.

Hay otros ganchos avanzados como useReducer, useLayoutEffect, y useDebugValue. Puede aprenderlos consultando la documentación oficial de React.

Unnati Bamania (10 artículos publicados)

Unnati es un entusiasta desarrollador de pila completa. Le encanta construir proyectos usando varios lenguajes de programación. En su tiempo libre le encanta tocar la guitarra y le encanta la cocina.

Más de Unnati Bamania