La memorización es una técnica de optimización, similar al almacenamiento en caché. Funciona almacenando los resultados anteriores de una llamada de función y usando esos resultados la próxima vez que se ejecute la función. Es especialmente útil en aplicaciones de computación pesada que repiten llamadas de función en los mismos parámetros.
Puede usar la memorización en JavaScript simple y también en React, de diferentes maneras.
Memoización en JavaScript
Para memorizar una función en JavaScript, debe almacenar los resultados de esa función en un caché. El caché puede ser un objeto con los argumentos como claves y los resultados como valores.
Cuando llama a esta función, primero verifica si el resultado está presente en el caché antes de ejecutarse. Si es así, devuelve los resultados almacenados en caché. De lo contrario, se ejecuta.
Considere esta función:
funcióncuadrado(número) {
devolver número * número
}
La función toma un argumento y devuelve su cuadrado.
Para ejecutar la función, llámala con un número como este:
cuadrado(5) // 25
Con 5 como argumento, square() se ejecutará bastante rápido. Sin embargo, si tuviera que calcular el cuadrado de 70,000, habría un retraso notable. No por mucho, pero un retraso, no obstante. Ahora, si llamara a la función varias veces y pasara 70,000, experimentaría un retraso en cada llamada.
Puede eliminar este retraso mediante la memorización.
constante cuadradomemorizado = () => {
dejar cache = {};
devolver (núm) => {
si (numero en cache) {
consola.log('Reutilización del valor almacenado en caché');
devolver cache[número];
} más {
consola.log('Calculando resultado');
dejar resultado = num * num;
// cache la nuevoresultadovalorporSiguientetiempo
cache[número] = resultado;
devolver resultado;
}
}
}
En este ejemplo, la función verifica si se calculó el resultado antes, verificando si existe en el objeto de caché. Si lo tiene, devuelve el valor ya calculado.
Cuando la función recibe un nuevo número, calcula un nuevo valor y almacena los resultados en el caché antes de regresar.
Nuevamente, este ejemplo es bastante simple, pero explica cómo funcionaría la memorización para mejorar el rendimiento de un programa.
Solo debes memorizar funciones puras. Estas funciones devuelven el mismo resultado cuando pasas los mismos argumentos. Si usa la memorización en funciones impuras, no mejorará el rendimiento pero aumentará su sobrecarga. Eso es porque eliges la velocidad sobre la memoria cada vez que memorizas una función.
Memoización en React
Si está buscando optimizar los componentes de React, React proporciona memorización a través del gancho useMemo(), React.memo y useCallBack().
Usando useMemo()
useMemo() es un Gancho de reacción que acepta una función y una matriz de dependencia.
constante memoizedValue = useMemo(() => computeExpensiveValue (a, b), [a, b]);
Memoiza el valor devuelto por esa función. Los valores en la matriz de dependencia dictan cuándo se ejecuta la función. Solo cuando cambian se vuelve a ejecutar la función.
Por ejemplo, el siguiente componente de la aplicación tiene un valor memorizado llamado resultado.
importar { usarMemo } de "reaccionar"
funciónaplicación(valor) {
constante cuadrado = (valor) => {
devolver valor * valor
}
constante resultado = useMemo(
() => cuadrado (valor),
[ valor ]
);
devolver (
<división>{resultado (5)}</div>
)
}
El componente de la aplicación llama a square() en cada renderizado. El rendimiento se degradará si el componente de la aplicación se procesa muchas veces debido a Reaccionar accesorios cambiar o actualizar el estado, especialmente si la función square() es costosa.
Sin embargo, dado que useMemo() almacena en caché los valores devueltos, la función cuadrada no se ejecuta en cada nueva representación a menos que cambien los argumentos en la matriz de dependencia.
Usando React.memo()
React.memo() es un componente de orden superior que acepta un componente React y una función como argumentos. La función determina cuándo se debe actualizar el componente.
La función es opcional y, si no se proporciona, React.memo hace una comparación de copia superficial de los accesorios actuales del componente con sus accesorios anteriores. Si los accesorios son diferentes, desencadena una actualización. Si los accesorios son los mismos, se salta el renderizado y reutiliza los valores memorizados.
La función opcional acepta los apoyos anteriores y los apoyos siguientes como argumentos. Luego puede comparar explícitamente estos accesorios para decidir si actualizar el componente o no.
Reaccionar.memorándum(Componente, [sonIguales (prevProps, nextProps)])
Veamos primero un ejemplo sin el argumento de función opcional. A continuación hay un componente llamado Comentarios que acepta el nombre y los accesorios de correo electrónico.
funciónComentarios ({nombre, comentario, me gusta}) {
devolver (
<división>
<pags>{nombre}</pags>
<pags>{comentario}</pags>
<pags>{gustos}</pags>
</div>
)
}
El componente de comentarios memorizados tendrá React.memo envuelto así:
constante MemoizedComment = React.memo (Comentario)
Puede llamarlo y luego llamarlo como cualquier otro componente de React.
<MemoizedComment name="María" comentario ="La memorización es genial" Me gusta = 1/>
Si desea realizar la comparación de accesorios usted mismo, pase la siguiente función a React.memo como segundo argumento.
importar Reaccionar de "reaccionar"
funcióncheckCommentProps(PrevAccesorios, SiguienteAccesorios) {
devolver anteriorAccesorios.nombre siguienteAccesorios.nombre
&& anteriorAccesorios.comentario siguienteAccesorios.comentario
&& prevProps.me gusta siguienteProps.me gusta
}
constante MemoizedComment = React.memo (Comentarios, checkCommentProps)
Si checkProfileProps devuelve verdadero, el componente no se actualiza. De lo contrario, se vuelve a renderizar.
La función personalizada es útil cuando desea personalizar el renderizado. Por ejemplo, puede usarlo para actualizar el componente Comentarios solo cuando cambia la cantidad de Me gusta.
A diferencia del gancho useMemo() que memoriza solo el valor devuelto de una función, React.memo memoriza toda la función.
Use React.memo solo para componentes puros. Además, para reducir los costos de comparación, memorice solo los componentes cuyos accesorios cambien con frecuencia.
Usando useCallBack()
Puedes usar el gancho useCallBack() para memorizar componentes de función.
constante memoizedCallback = useCallback(
() => {
hacer algo (a, b);
},
[a, b],
);
La función se actualiza solo cuando cambian los valores en la matriz de dependencia. El gancho funciona como la devolución de llamada useMemo(), pero memoriza el componente de función entre renderizaciones en lugar de memorizar valores.
Considere el siguiente ejemplo de una función memorizada que llama a una API.
importar { useCallback, useEffect } de "reaccionar";
constante Componente = () => {
constante getData = useCallback(() => {
consola.log('llamar a una API');
}, []);
usarEfecto(() => {
obtener datos();
}, [obtener datos]);
};La función getData() llamada en useEffect se volverá a llamar solo cuando cambie el valor de getData.
¿Deberías memorizar?
En este tutorial, aprendió qué es la memorización, sus beneficios y cómo implementarla en JavaScript y React. Sin embargo, debes saber que React ya es rápido. En la mayoría de los casos, memorizar componentes o valores agrega costos de comparación y no mejora el rendimiento. Debido a esto, solo memorice los componentes costosos.
React 18 también introdujo nuevos ganchos como useId, useTransition y useInsertionEffect. Puede usarlos para mejorar el rendimiento y la experiencia del usuario de las aplicaciones React.
