在更新反应中的列表状态时，什么更有效？使用浅拷贝还是切片？

Question

我有一个 CartStruct 接口，它包含一个属性 CartObj 类型的 cartObj。 CartObj 接口拥有许多属性。其中之一是购物车编号。

这是界面模型

const interface CartStruct {
  cartObj: CartObj
  pos: number
}

const interface CartObj {
  ...
  cartNumber: number
  ...
}

在一个表单中，用户可以为多个 CartStruct 输入数据，因此我制作了一个存储 CartStruct 数组的 useState。

const [cart, setCart] = useState<CartStruct[]>([])

当用户更改 cartNumber 的值时，我找到了两种方法。一个使用浅拷贝，这更具可读性。另一种方法是切片。它更直接，而且可读性肯定更差。然而，哪一种效率更高？您避免在第二个中使用浅拷贝这一事实是否会使代码更高效？一个比另一个好还有其他原因吗？

方法如下

方法一：使用浅拷贝

const lst = [...cart]
lst[index].cartObj.cartNumber = e.target.value
setCart(lst)

方法二：直接方法

setCart([
  ...cart.slice(0, index), {
    ...cart[index], 
    cartObj: {
      ...cart[index].cartObj, 
      cartNumber: e.target.value
    }
  },
  ...cart.slice(index + 1)
])

Answer 1

首先方法2也是浅拷贝，你先做...cart.

不同之处在于，在方法 2 中，您还将路径中的所有对象浅复制到您的更改 - 这称为不可变更新。顺便说一句，有些图书馆可以为您做这件事，以使其更具可读性，例如：react immutability helper or immer.

方法一稍快一些。但方法 2 更正确。因为虽然 React 在默认情况下渲染父组件时会渲染所有子组件，但您可能会记住其中一个子组件（使用 React.memo），然后该组件只会在其 props 或状态通过引用更改时渲染（除非你使用上下文）。

最后一点，我不知道你的购物车里有多少件商品。与您的状态管理无关。但是，如果它是一个非常长的项目列表并且性能很重要，您可能希望仅向父组件传递一个 itemId 列表，并让子组件通过 ID 获取正确的项目。这样，当项目内的字段发生更改时，父组件将不会呈现。

祝你好运

在更新反应中的列表状态时，什么更有效？使用浅拷贝还是切片？

What is more efficient when updating the state of a list in react? Using Shallow Copies or slicing?

javascript

reactjs

react-state