React.memo: gran matriz de objetos anidados, forma propuesta de hacer comparaciones eficientes utilizando un identificador de seguimiento de cambios.
Tengo un componente de React que toma una matriz de objetos complejos y realiza algunos cálculos costosos con ellos.
Quiero usar React.memo para evitar volver a renderizar si las matrices no han cambiado.
La comparación profunda puede ser costosa.
Se me ocurrió una forma de verificar si la matriz ha cambiado y me pregunto por qué no puedo encontrar ejemplos de personas que utilicen este método, ya que parece ser una solución tan simple.
Quizás me esté perdiendo una razón por la cual no debería usar el método.
¿Es esta una técnica comúnmente utilizada?
Sé que puedo convertir los objetos en JSON.stringify y luego compararlos, ¿no sería potencialmente costoso si los objetos son grandes?
Quiero cambiar un campo de identificación único en el objeto cada vez que alguno de los valores en el objeto cambie.
por ejemplo,
“`js
const arrayOfLargeObjects = [obj1, obj2, obj3,…..y así sucesivamente]
si
obj1 = {letter: a, moreNestedStuff: {blah blah}, memoizationid: '1'}//id es más largo en la implementación real
cambia a
obj1 = {letter: b, moreNestedStuff: {blah blah}, memoizationid: '2'}
//todo esto se hace de forma inmutable, se omiten detalles por brevedad
const stringify = (obj) => obj.map(el.memoizationid).join('')
const comparisonFunction = (a, b) => stringify(a) === stringify(b)
<mycomponent myarray="{arrayOfLargeObjects}/">
React.memo(MyComponent, comparisonFunction);
“`
davy.ai
Utilizando Memoization para Evitar el Volver a Renderizar con Componentes de React
Cuando se utiliza un componente de React que toma un array de objetos complejos y realiza cálculos costosos con ellos, puede ser beneficioso utilizar la memoization para evitar volver a renderizar cuando el array no ha cambiado. Sin embargo, una comparación profunda puede ser demasiado costosa para objetos grandes.
Una técnica para verificar si el array ha cambiado es cambiar un campo de ID único en el objeto cada vez que alguno de los valores en el objeto cambia. Por ejemplo, puedes crear un campo “memoizationid” que sea una representación en cadena de caracteres de las propiedades relevantes del objeto.
Para comparar dos arrays de objetos, puedes utilizar una función de comparación que compara los campos “memoizationid” de cada objeto. Esta función concatena los campos “memoizationid” de cada objeto en el array y compara las cadenas resultantes.
Si bien JSON.stringify es otra opción para comparar objetos, puede ser más lento y requerir más memoria para objetos grandes. Por lo tanto, la técnica de cambiar un campo de ID único puede ser una opción más eficiente.
Aunque este método es relativamente simple, no se utiliza tan frecuentemente como otras técnicas para la memoization. Sin embargo, puede ser una opción útil cuando se trabaja con objetos grandes y cuando la comparación profunda no es factible.
Para implementar este método con React.memo, puedes pasar el componente y la función de comparación como argumentos a la función de memoization.
“`js
const arrayOfLargeObjects = [obj1,obj2,obj3,…..y así sucesivamente]
const stringify = (obj) => obj.map(el => el.memoizationid).join(”)
const comparisonFunction = (a,b) => stringify(a) === stringify(b)
React.memo(MyComponent, comparisonFunction);
“`