homefinance blog
No es ningún secreto para nadie que React.js se haya vuelto muy popular en los últimos años. Ahora es la Biblioteca JavaScript elegida por muchos de los reproductores más importantes en Internet, incluidos Facebook y WhatsApp.
Una de las principales razones de su crecimiento fue la introducción de ganchos en la versión 16.8. React Hooks le permite acceder a la funcionalidad React sin escribir los componentes de la clase. Ahora los componentes funcionales con ganchos se han convertido en la estructura básica de los desarrolladores para trabajar con React. En esta publicación de blog, profundizaremos en un gancho específico, Usecallback, porque alcanza una parte fundamental de la programación funcional conocida como memoria. Sabrá exactamente cómo y cuando use el gancho Usecallback y aproveche al máximo sus capacidades de mejora del rendimiento.
¿Listo? ¡Vamos a bucear!
¿Qué es la memorización? La memorización es cuando una función compleja almacena su salida, de modo que la próxima vez se llama con la misma entrada. Es similar al almacenamiento en caché, pero a un nivel más local. Puede omitir cualquier cálculo complejo y puede devolver el resultado más rápido porque ya está calculado. Esto puede tener un efecto significativo en la asignación y el rendimiento de la memoria, y esta solicitud es lo que pretende aliviar el gancho Usacallback. El uso de ReactCallback vs Usememo en este momento, vale la pena mencionar que Usecallback se está apareando maravillosamente con otro gancho llamado Usememo. Los discutiremos a ambos, pero en esta pieza nos centraremos en Usecallback como el tema principal.
La diferencia clave es que USEMEMO devuelve un valor memorizado, mientras que USECALLBack devuelve una función almacenada. Esto significa que USEMEMO se usa para almacenar un valor calculado, mientras que USECALLBack devuelve una función que puede llamar más tarde. Estos ganchos devolverán una versión de caché, a menos que cambie una de sus adicciones (por ejemplo, el estado de los accesorios). Echemos un vistazo a las dos funciones en acción: import {usememo, usecallback} de ‘React’ Constates = [3, 9, 6, 4, 2, 1] // Esto siempre devolverá el mismo valor, una matriz ordenada. Una vez que cambia la matriz de valores, esto se repuputará. Conc memoizedValue = usememo (() => valores.sort (), [valores]) // Esto me devolverá una función que se puede llamar más adelante. Siempre devolverá el mismo resultado a menos que la matriz de valores se modifique. Const memoizedFunction = useCallback (() => valores.sort (), [valores]) El fragmento de código anterior es un ejemplo artificial, pero muestra la diferencia entre las dos llamadas inversas: MemoizedDValue se convertirá en la matriz [1, 2, 3, 3, 4, 6, 9]. Mientras la variable de valores permanezca, la misma permanecerá en MemozedValue y nunca se recalculará.
MemoizedDunction será una función que devolverá la matriz [1, 2, 3, 4, 6, 9].
Lo bueno de estas dos llamadas inversas es que se almacenan en caché y permanecen hasta que se cambia la matriz de adicciones. Esto significa que, en orden, no recibirán la basura recolectada. React.js es ahora la Biblioteca JavaScript elegida para muchos de los actores más grandes en Internet, incluidos Facebook y WhatsApp. Obtenga más información en esta guía ️ Haga clic para enviar una reproducción de tweet y reacción por qué es importante recordar cuando se trata de reaccionar. Tiene que ver con cómo React reproduce sus componentes. React utiliza un DOM virtual almacenado en la memoria para comparar los datos y decidir qué actualizar. El domo virtual ayuda a reaccionar con el rendimiento y mantiene la aplicación rápidamente. Por defecto, si algún valor en su componente cambia, todo el componente se volverá a ser. Esto hace que reaccionar sea “reactivo” en la entrada del usuario y permite que la pantalla se actualice sin recargar la página. No desea reproducir su componente porque los cambios no afectarán ese componente. Aquí hay memorización útil a través de USECALLBack y Usememo.
Cuando Reaccione nuevamente reacciona su componente, también recrea las funciones que ha declarado dentro de su componente. Tenga en cuenta que cuando compara la igualdad de una función con otra función, siempre serán falsas. Debido a que una función también es un objeto, solo coincidirá con sí mismo:
Regístrese para el boletín
¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!
Suscríbase ahora
// Estas variables contienen exactamente la función de seis pero no tienen constante conste de hello = () => console.log (‘Hello Matt’) const Hello2 = () => Console.log (‘Hello Matt’) Hello === Hello2 // False Hello === Hello // True, cuando Reaccione nuevamente reacciona su componente, verá todas las funciones que se declaran en su componente. O, y las funciones simples son fáciles de calcular y no afectarán el rendimiento. Pero los otros momentos en que no desea que la función se vea como una nueva función, puede confiar en Usecallback para ayudarlo. Puede pensar: “¿Cuando no quisiera que una función se vea como una nueva función?” Bueno, hay algunos casos en que Usecallback tiene más sentido:
Transmitir la función de otro componente que también se memoriza (usememo)
Su función tiene un estado interno que debe retener
Su característica es una adicción a otro gancho, como Useffect, por ejemplo
Los beneficios de rendimiento de React Usecallback cuando useCallback se usa correctamente, pueden ayudar a acelerar la aplicación y prevenir la reenvolución de los componentes si no es necesario.
Supongamos, por ejemplo, que tiene un componente que asume una gran cantidad de datos y es responsable de mostrar estos datos en forma de diagrama o gráfico, de la siguiente manera:
Gráfico gráfico generado usando un componente React. Suponga que el componente principal para los re-renderizadores del componente de visualización de datos, pero los accesorios o la condición alterados no afectan ese componente. En este caso, probablemente no desee ni tenga que volver a jugarlo y recuperar todos los datos. Evitar este reenvío y restauración puede guardar el ancho de banda del usuario y proporcionar una experiencia más fluida para el usuario. ¡Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Revise nuestras características
Las desventajas del uso de la devolución de llamada React, aunque este gancho puede ayudarlo a mejorar el rendimiento, también viene con sus trampas. Algunas cosas a considerar antes de usar Usecallback (y usememo) son:
Colección de basura: las otras funciones que aún no se almacenan serán lanzadas por React para liberar la memoria.
Asignación de memoria: similar a la recolección de basura, cuantas más funciones memorizadas, más memoria será. Además, cada vez que usa estas llamadas inversas, hay un montón de código dentro del React que tiene que usar aún más memoria para brindarle el resultado almacenado en caché.
Complejidad del código: cuando comienza a colocar funciones en estos ganchos, aumenta inmediatamente la complejidad del código. Ahora requiere más comprensión de la razón por la cual se usan estos ganchos y confirman que se usan correctamente.
Ser consciente de las trampas de arriba puede salvarlo del dolor de cabeza de obstaculizarse. Cuando piense en USECALLBack, asegúrese de que los beneficios de rendimiento superen las desventajas. Los alcanzar el uso de la llamada inversa hay una configuración simple con un componente de botón y un componente de contador. El medidor tiene dos partes de estado y reproduce dos componentes de botones, cada uno que actualizará una parte separada de los componentes de estado. El componente del botón tiene dos elementos de accesorios: HandLeclick y Name. Cada vez que se represente el botón, se conectará a la consola. Import {useCallback, useState} desde ‘react’ const button = ({handLecLick, name}) => {console.log (`$ {name} rendered`) return
Aprenda a domar el uso del gancho de devolución de llamada React
Tags Aprenda a domar el uso del gancho de devolución de llamada React
