Tengo una interfaz CartStruct que contiene una propiedad cartObj de tipo CartObj. La interfaz CartObj tiene muchas propiedades. Uno de los cuales es cartNumber.
Esta es la maqueta de las interfaces.
const interface CartStruct { cartObj: CartObj pos: number } const interface CartObj { ... cartNumber: number ... }En un formulario, un usuario puede ingresar datos para múltiples CartStructs, por lo que hice un useState que almacena una matriz CartStruct.
const [cart, setCart] = useState<CartStruct[]>([])
Cuando el usuario cambia el valor de cartNumber, he encontrado dos formas de hacerlo. Uno que usa una copia superficial y esto es mucho más legible. El otro método es cortar. Es más directo y definitivamente menos legible. Sin embargo, ¿cuál es más eficiente? ¿El hecho de que esté evitando la copia superficial en el segundo hace que el código sea más eficiente? ¿Hay alguna otra razón por la cual uno es mejor que el otro?
Aquí están los métodos
Método 1: Uso de copias superficiales
const lst = [...cart] lst[index].cartObj.cartNumber = e.target.value setCart(lst)Método 2: Enfoque directo
setCart([ ...cart.slice(0, index), { ...cart[index], cartObj: { ...cart[index].cartObj, cartNumber: e.target.value } }, ...cart.slice(index + 1) ])En primer lugar, el Método 2 también es una copia superficial, comienza haciendo ...cart .
La diferencia es que en el Método 2 también copia superficialmente todos los objetos en la ruta a su cambio; esto se denomina actualización inmutable. por cierto, hay bibliotecas que pueden hacerlo por ti, para que sea más legible, como: react immutability helper o immer .
El método 1 es un poco más rápido. pero el Método 2 es más correcto. Porque aunque React renderiza todos los componentes secundarios cuando un padre se renderiza de forma predeterminada, puede memorizar uno de los componentes secundarios (usando React.memo) y luego este componente solo se renderizará si sus accesorios o estado cambiaron por referencia (a menos que use contexto).
Una nota final, no sé cuántos artículos tienes en el carrito. Y nada de su gestión estatal. Pero si se trata de una lista muy larga de elementos y cuestiones de rendimiento, es posible que desee pasar al componente principal solo una lista de elementos y dejar que el componente secundario obtenga el elemento correcto por ID. De esta forma, el componente principal no se representará cuando se cambie un campo dentro de un elemento.
Buena suerte