¿Por qué utilizar ganchos de React?
Como todos sabemos, no hay componentes sin React, y los componentes de React se dividen en componentes basados en clases y componentes funcionales. Entonces, ¿por qué los desarrolladores de React prefieren los componentes funcionales?
Primero, hablemos brevemente sobre la diferencia entre componentes de clase y componentes funcionales desde la perspectiva del código fuente:
Al definir componentes de clase, debemos heredar React. Esto no se puede explicar de la noche a la mañana. Entonces, ¿qué sucede cuando se procesa el componente de carga?
1. Encuentre el componente según la etiqueta del componente
2. Cree una nueva instancia del componente (porque es un componente basado en clases) y llame al método de renderizado en el prototipo de esa instancia
p>
3. Convertir DOM virtual en DOM real
Los componentes basados en clases se definen como componentes complejos, que no es lo que React quiere. Los componentes son canalizaciones compuestas de funciones puras y luego los componentes funcionales se convierten en componentes simples.
Como función, el componente de función no hereda de React.Component. Componente, solo requiere dos pasos 1. Encuentre el componente 2.2 Renderice el componente, por lo que no hay ciclo de vida, ni estado y esto.
Esto significa que los componentes funcionales que implementan la gestión del estado dependen del uso de redux y, si no es necesario, no se utilizará (de hecho, no es necesario utilizarlo). Esto significa que los componentes funcionales deben usar redux para la gestión del estado y cumplir con la directriz de redux, que es que si no quieres usar redux, no lo uses (lo cual en realidad es muy bueno a veces, porque facilita la implementación global). gestión), tiende a hacer que los componentes simples de React se vuelvan voluminosos.
Por lo tanto, el equipo de React ha introducido React HOOKS estables a partir de la versión 16.8 para resolver estos problemas.
Los ganchos de convención de React tienen el prefijo use, por lo que cuando necesitas personalizar un gancho, generalmente creas el gancho con use como prefijo. Además, React proporciona cuatro ganchos de forma predeterminada:
1) useState
es equivalente a una declaración estática, su propósito es introducir el estado y el gancho retendrá el estado. useState() recibe el valor inicial del estado de la función y tiene dos parámetros. El primero es la variable de estado y el segundo es el método para cambiar el estado, como const [número, setNumber] = useState(0)
.2) useEffect
Gancho de efecto secundario, como alternativa al ciclo de vida, el más común es solicitar datos del servidor
useEffect() es uno de los más comunes ganchos usados. Recibe dos parámetros, el primer parámetro es una función, el segundo parámetro es una matriz en la que se dan las dependencias y los valores en la matriz representan los objetos a monitorear.
La pregunta es ¿dónde se refleja el ciclo de vida?
useEffect() se ejecutará cuando cambien los parámetros del componente. useEffect() también se ejecuta cuando el componente se procesa por primera vez. ¿No es equivalente a componenteDidMount() en el ciclo de vida? El retorno bajo useEffect() generalmente se escribe después de la operación asincrónica del primer parámetro, que es equivalente a componenteWillUnmount(), y se ejecuta antes de desinstalar el componente para realizar el trabajo final.
3) useReducer
Pertenece al gancho de acción, useReducer() calculará el nuevo estado y devolverá una matriz.
Por ejemplo, const [estado, envío] = useReducer(ReducerFunc, initState)
El primer valor es el valor del estado actual y el segundo valor es el envío que envía la acción. El primer valor es el valor del estado actual y el segundo valor es la programación para enviar la acción.
4) useContext
*** Disfrute del enlace de estado, cree un contexto fuera del componente y envuelva el componente. Puede envolver el estado del componente *** y disfrutar. uso de otras funciones dentro del componente La llamada del componente, es decir:
1.externa al establecimiento de un Contexto ()
2. Envuelva el componente 1 con el estado <. /p>
3. Cuando se llama desde otro Cuando se llama a Context() internamente en un componente funcional, se puede disfrutar del estado del componente 1
Sin embargo, una cosa a tener en cuenta es que cuando se usa useContext para la gestión del flujo de datos, cada vez que se actualiza el contexto, todos los componentes que usan el contexto se volverán a representar. Por lo tanto, necesita una forma de optimizar useContext() para reducir las actualizaciones innecesarias: ¿Cómo manejar elegantemente los problemas de renderizado innecesarios con React Context?
Además, existen algunos ganchos, como:
5) useCallback y useMemo
se pueden usar para optimizar el rendimiento de React
reaccionar es muy molesto, pero después de actualizar los datos, el renderizador actualiza el nodo para la diferenciación y no se puede detener.
Suponiendo que el componente React tiene un botón y el método de clic se declara al mismo tiempo, el botón y el método de clic se volverán a representar cada vez que se representen.
En este momento, puede utilizar useCallback() para evitar la presentación repetida y sin sentido del componente.
Por ejemplo:
La razón de esto es almacenar en caché referencias idénticas para evitar una representación no válida.
El parámetro useMemo se usa de la misma manera, pero useCallback generalmente se usa para almacenar en caché funciones, mientras que useMemo se usa para almacenar en caché cálculos, etc.
useCallback(fn, deps) es equivalente a useMemo(()=gt; fn, deps)
* Se puede decir que useCallback implementa useMemo de la siguiente manera:
useMemo(diversión,...deps)?.deps)?
useCallback(diversión(....deps), [....deps])
Ambos son equivalentes.