Cómo comenzar rápidamente con VUE3.0: Ingrese al
Los ganchos se utilizan para usar el estado y otras características de React sin escribir clases. Entonces, ¿qué son exactamente los Hooks, por qué deberíamos usarlos, qué Hooks comunes proporciona React y cómo personalizarlos? A continuación se los revelará uno por uno.
Los ganchos se traducen como ganchos que son funciones dentro de los componentes de funciones que son responsables de conectarse a funciones externas.
React proporciona algunos ganchos comunes y React también admite ganchos personalizados. Estos ganchos se utilizan para introducir funciones externas en funciones.
Cuando necesitamos introducir funciones externas en un componente, podemos usar los ganchos proporcionados por React o personalizar los ganchos.
Por ejemplo, si introduce la función de administrar el estado en un componente, puede usar la función useState. El uso de useState se presentará en detalle a continuación.
utilizar ganchos Hay dos razones principales para utilizar ganchos:
Antes de la aparición de Hooks, React tenía que tomar prestados patrones de diseño complejos, como componentes de alto orden y accesorios de renderizado, para lograr la reutilización lógica. Sin embargo, los componentes de alto orden generarán nodos de componentes redundantes, lo que complicará la depuración.
Los ganchos nos permiten reutilizar la lógica de estado sin modificar la estructura del componente. El uso de ganchos personalizados se presentará en detalle a continuación.
En los componentes de clase, el código para la misma lógica de negocios está disperso en diferentes funciones del ciclo de vida del componente, y Hooks puede agregar el código para la misma lógica de negocios, lo que permite que la lógica de negocios sea más fácil de entender. claramente separados, lo que hace que el código sea más fácil de entender y mantener.
useState es un Hook que le permite agregar estado en los componentes de la función React.
Los ejemplos de uso son los siguientes:
importar React, { useState } de 'react';
función Ejemplo() {
// Declarar una variable de estado llamada "count" const [count, setCount] = useState(0);
// ... El código anterior declara un recuento de variables de estado con un valor inicial de 0 y actualiza el recuento actual llamando a setCount.
useEffect le permite realizar operaciones de efectos secundarios en componentes de funciones.
Los efectos secundarios se refieren a un fragmento de código que no tiene nada que ver con los resultados de la ejecución actual. Las operaciones de efectos secundarios comunes incluyen la adquisición de datos, la configuración de suscripciones y el cambio manual del DOM en los componentes de React.
useEffect puede recibir dos parámetros, el código es el siguiente:
useEffect (devolución de llamada, dependencias)
El primer parámetro es la devolución de llamada de la función que se ejecutará y el segundo parámetro son las dependencias de la matriz de dependencias opcionales.
La dependencia es opcional. Si no se especifica, la devolución de llamada se ejecutará cada vez que se ejecute el componente de función; si se especifica, solo se ejecutará cuando cambie el valor de la dependencia.
Los ejemplos de uso son los siguientes:
function Ejemplo() {
const [recuento, setCount] = useState(0);
// Similar a componenteDidMount y componenteDidUpdate:
utilizarEfecto(() => {
//Actualiza el título del documento usando la API del navegador
document.title = `Hiciste clic en ${count} veces`;
retorno () => {
// Puede usarse para borrar, equivalente a componenteWillUnmount del componente de clase
}
}, [count]); // Especifica la dependencia como recuento y ejecuta el efecto secundario cuando se actualiza el recuento // ... El código anterior usa useEffect para implementar la función de efecto secundario cuando se actualiza el recuento de dependencias y lo borra. devolviendo la función de devolución de llamada El último resultado de la ejecución.
Además, useEffect proporciona cuatro tiempos para ejecutar efectos secundarios:
La función de devolución de llamada definida por useCallback solo volverá a declarar la función de devolución de llamada cuando las dependencias cambien, asegurando así que el componente no creará funciones de devolución de llamada duplicadas . No será necesario volver a renderizar con frecuencia el componente que recibe esta función de devolución de llamada como atributo.
Los ejemplos de uso son los siguientes:
const memoizedCallback = useCallback(() => {
hacer algo (a, b)
}, [a, b]) El código anterior redeclarará la función de devolución de llamada solo cuando las dependencias a y b cambien.
La función de creación definida por useMemo solo se recalculará cuando cambie una determinada dependencia, lo que ayuda en cálculos de gran sobrecarga que no se repetirán cada vez que se represente, y el componente que recibe este valor calculado como propiedad no lo hará. Es necesario volver a renderizar con frecuencia .
Los ejemplos de uso son los siguientes:
const memoizedValue = useMemo(() => ComputeExpensiveValue(a, b), [a, b])
El código anterior solo se volverá a calcular cuando las dependencias a y b cambien.
useRef devuelve un objeto de referencia, que persiste durante todo el ciclo de vida del componente.
Tiene dos usos:
Un ejemplo de cómo guardar un nodo DOM es el siguiente:
function TextInputWithFocusButton() {
constante inputEl = useRef(nulo)
const onButtonClick = () => {
// `current` apunta al elemento de entrada de texto inputEl.current.focus() que se ha montado en el DOM
}
devolver (
<>
<entrada ref={inputEl} tipo='texto' />
<button onClick={onButtonClick}>Centrar la entrada</button>
</>
)
} El código anterior crea un objeto de referencia a través de useRef, guarda la referencia del nodo DOM y puede realizar operaciones DOM en ref.current.
Un ejemplo de cómo compartir datos entre múltiples renderizados es el siguiente:
import React, { useState, useCallback, useRef } from 'react'
exportar función predeterminada Timer() {
//Definir el estado del tiempo para guardar el tiempo acumulado de timing const [time, setTime] = useState(0)
// Definir temporizador. Dicho contenedor se utiliza para guardar una variable entre representaciones entre componentes const timer = useRef(null)
// Función de controlador de eventos para iniciar el tiempo const handleStart = useCallback(() => {
// Usa el atributo actual para establecer el valor de ref timer.current = window.setInterval(() => {
establecerHora((hora) => hora + 1)
}, 100)
}, [])
//Pausar la función de manejo de eventos de sincronización const handlePause = useCallback(() => {
// Usa clearInterval para detener el tiempo window.clearInterval(timer.current)
temporizador.actual = nulo
}, [])
devolver (
<div>
{tiempo / 10} segundos.
<br />
<button onClick={handleStart}>Iniciar</button>
<button onClick={handlePause}>Pausar</button>
</div>
)
} El código anterior crea un objeto de referencia con un nombre de variable de temporizador mediante useRef. Este objeto se puede llamar al renderizar entre componentes, crear un nuevo temporizador al iniciar el cronometraje y borrar el temporizador cuando se detiene el cronómetro.
useContext se usa para recibir un objeto de contexto y devolver el valor del contexto, lo que puede lograr el intercambio de datos entre niveles.
Un ejemplo es el siguiente:
//Crear un objeto de contexto const MyContext = React.createContext(initialValue)
función aplicación() {
devolver (
// Pasa el valor del contexto a través de Context.Provider <MyContext.Provider value='1'>
<Contenedor/>
</MiContexto.Proveedor>
)
}
función Contenedor() {
devolver <Prueba />
}
función Prueba() {
// Obtener el valor de Context const theme = useContext(MyContext) // 1
devolver <div></div>
} El código anterior obtiene el contexto definido en el componente de la aplicación a través de useContext, logrando el intercambio de datos entre componentes jerárquicos.
useReducer se utiliza para introducir la función Reductor.
Un ejemplo es el siguiente:
const [estado, envío] = useReducer(reductor, estado inicial)
Acepta la función Reductor y el valor inicial del estado como parámetros y devuelve una matriz. El primer miembro de la matriz es el valor actual del estado y el segundo miembro es la función de envío que envía la acción.
A través de Hooks personalizados, la lógica de los componentes se puede extraer en funciones reutilizables.
Los Hooks personalizados son funciones que tienen dos características que las distinguen de las funciones ordinarias:
Un ejemplo es el siguiente:
importar {useState, useCallback} de 'react'
función utilizarContador() {
// Definir recuento, este estado se utiliza para guardar el valor actual const [count, setCount] = useState(0)
// Implementar la operación de sumar 1 incremento constante = useCallback(() => setCount(count + 1), [count])
// Implementar la operación de decremento en 1 const decrement = useCallback(() => setCount(count - 1), [count])
//Restablecer contador const reset = useCallback(() => setCount(0), [])
// Exportar las operaciones de lógica de negocios para que las utilice la persona que llama return {count, increment, decrement, reset}
}
// componente 1
función MiComponente1() {
const {contar, incrementar, disminuir, restablecer} = usarContador()
}
// componente 2
función MiComponente2() {
const {contar, incrementar, disminuir, restablecer} = usarContador()
} El código anterior reutiliza fácilmente la lógica empresarial entre el componente MyComponent1 y el componente MyComponent2 personalizando Hooks useCounter.
React proporciona oficialmente la biblioteca de reacción-uso, que encapsula una gran cantidad de ganchos personalizados que se pueden usar directamente, lo que nos ayuda a simplificar la lógica interna de los componentes y mejorar la legibilidad y el mantenimiento del código.
Entre ellos, nuestros ganchos personalizados de uso común son:
Puede ir al sitio web oficial de reaccionar-use para aprender cómo usarlo.
Este artículo presenta los Hooks de React desde cuatro aspectos: qué son los Hooks, por qué usarlos, qué Hooks comunes proporciona React y cómo personalizar los Hooks. Creo que todos tienen una comprensión más profunda de los Hooks de React.
Espero que te ayude, gracias por leer ~