Gancho de reacción
Agregados desde reaccionar 16.8, los ganchos de reacción le permiten usar el estado y otras características de React sin escribir clases.
¿Por qué deberíamos aceptar ganchos de reacción? Porque los componentes de la clase tienen los siguientes problemas:
La API de enlace oficial se presentará una por una a continuación.
1: Devuelve un estado y un definidor (llamado tupla en otros idiomas. Tupla) para modificar ese estado. Una vez instalado, el estado sólo puede ser modificado por este definidor.
2. useEffect(callback, arr)
Función: maneja los efectos secundarios de los componentes de la función, como operaciones asincrónicas, operaciones retrasadas, etc. useEffect tiene dos parámetros, a saber, devolución de llamada y dependencia de matriz. Sin arr, es equivalente al ciclo de vida de componenteDidMount. Con arr, es equivalente al ciclo de vida de componenteDidMount. Cuando no hay arr, es equivalente al ciclo de vida de componenteDidMount; cuando hay arr, es equivalente a los ciclos de vida de componenteDidMount y componenteDidUpdata. Si hay un retorno en la devolución de llamada, es equivalente a componenteWillUnmount.
3.useContext
Función: Disfrute de enlaces de datos entre componentes. Su uso se puede dividir en tres pasos:
4.useReducer
5.useMemo, useCallback
Estas dos API están relacionadas con la optimización del rendimiento.
Según los dos puntos anteriores, nuestra solución habitual es: usar inmutable para comparar y llamar a setState cuando no son iguales; determinar los accesorios y estados antes y después en mustComponentUpdate y devolver falso cuando los hay; sin cambios.
Con los ganchos, podemos usar funciones para crear componentes con estado interno. Sin embargo, al usar el formulario funcional, perdemos el mustComponentUpdate mencionado anteriormente y no podemos decidir si actualizar determinando el estado antes y después. Además, en los componentes funcionales, React ya no distingue entre los dos estados de montaje y actualización, lo que significa que cada llamada a un componente funcional ejecutará toda su lógica interna, lo que resultará en una gran pérdida de rendimiento. Por lo tanto, useMemo y useCallback son excelentes aplicaciones para resolver este problema de rendimiento.
Los parámetros de useCallback y useMemo son los mismos que los de useEffect. Tanto useMemo como useCallback se ejecutan cuando el componente se representa por primera vez, y luego nuevamente cuando las variables de las que dependen cambian; ambos enlaces devuelven valores almacenados en caché, donde useMemo devuelve variables almacenadas en caché y useCallback devuelve valores almacenados en caché.
Ejemplo de uso de useMemo:
Si no se usa useMemo, se ejecutará expand() independientemente de si el recuento o el valor cambian.
Si se usa useMemo. , solo expand() solo se ejecutará cuando cambie el recuento
useCallback es similar a useMemo, pero adecuado para diferentes escenarios de aplicación: por ejemplo, si hay un componente principal que contiene un componente secundario y el componente secundario el componente recibe una función como Props. Normalmente, si el componente principal se actualiza, el componente secundario también realizará una actualización; sin embargo, en la mayoría de los escenarios, la actualización no es necesaria, por lo que podemos usar useCallback para devolver una función y luego pasar la función; al componente secundario como accesorio; de esta manera, los componentes secundarios pueden evitar actualizaciones innecesarias.
6. useRef
useRef es un método que devuelve un objeto de referencia variable; su propiedad .current se inicializa con el parámetro pasado (initialValue); puede contener cualquier tipo de valor: un DOM, un objeto o cualquier otro valor mutable; el objeto ref devuelto permanece sin cambios durante todo el ciclo de vida del componente; modificar el valor de ref no activará una actualización; El objeto ref devuelto permanece sin cambios durante la vida útil del componente; modificar el valor de ref no desencadena una nueva representación del componente.
useRef se usa comúnmente para acceder a nodos DOM, operar DOM, escuchar eventos, etc., de la siguiente manera:
Además de los usos tradicionales, también puede guardar datos "durante el renderizado ciclos".
En el ejemplo anterior, después de hacer clic en el botón Imprimir Me gusta y luego hacer clic en el botón numérico, podemos ver que LikeRef.current imprime 11 después de 2 segundos, mientras que Like imprime 1.
Debido a que los accesorios y el estado son siempre los mismos en cualquier presentación dada, es imposible tener el mismo estado si los accesorios y el estado son independientes entre sí en cualquier presentación dada, pero si los accesorios y los estados son independientes de; entre sí en cualquier presentación determinada, entonces es posible tener el mismo estado en cualquier presentación determinada.
Si los accesorios y los estados son independientes entre sí en diferentes representaciones, entonces cualquier valor utilizado para ellos también es independiente entre sí. Entonces, cuando no se hace clic en el botón numérico, onButtonClick obtendrá el mismo valor.
Y ref sigue siendo una referencia única en todos los renderizados, por lo que cualquier asignación u obtención de referencia obtendrá el estado final sin aislamiento.
7. useImperativeHandle
Cuando usa userRef en un componente, useImperativeHandle le permite personalizar el valor de instancia expuesto al padre cuando usa ref; si no lo usa, el padre El; ref (childRef) no podrá acceder a ningún valor.
8. useLayoutEffect
Esto es lo mismo que useEffect, pero se llama sincrónicamente (inmediatamente) después de todos los cambios DOM. Puede usarlo para leer el diseño DOM y activar una nueva renderización sincrónicamente. El programa de actualización dentro de useLayoutEffect se actualizará sincrónicamente antes de que el navegador realice cualquier dibujo. Porque se ejecutará hasta su finalización antes de que el navegador pueda realizar cualquier dibujo, lo que evitará que el navegador dibuje.
Escenario de uso: cuando la operación en useEffect necesita procesar el DOM y cambiar el estilo de la página, debe realizar esta operación; de lo contrario, puede ocurrir un problema en la pantalla de presentación.
9. useDebugValue
useDebugValue es la etiqueta utilizada para mostrar ganchos personalizados en las herramientas de desarrollo de React.
useDebugValue acepta una función de formato como segundo argumento opcional. Esta función solo se llama cuando está marcada. Toma el valor de depuración como argumento y devuelve el valor de visualización formateado.