为什么不使用带有扩展运算符的 splice 从数组中删除项目以进行react?

IT技术 javascript arrays reactjs immutability
2021-03-23 22:13:12

splice() 会改变原始数组,应该避免。相反,一个不错的选择是使用filter()创建一个新数组,因此不会改变状态。但是我曾经使用带有扩展运算符的 splice() 从数组中删除项目。

removeItem = index => {
  const items = [...this.state.items];
  items.splice(index, 1);

  this.setState({ items });
}

所以在这种情况下,当我记录items更改但this.state.items保持不变时。问题是,为什么每个人都使用filter而不是splicewith spread它有什么缺点吗?

2个回答

filter()有一个更实用的方法,这有它的好处。使用不可变数据更容易、并发和错误安全。

但是在您的示例中,您正在通过创建items数组来做类似的事情所以你仍然没有改变任何现有的数组。


const items = [...this.state.items];

创建 的副本this.state.items,因此一旦您执行splice().

因此,考虑到您的方法,它与 没有什么不同filter(),所以现在归结为品味问题。

const items = [...this.state.items];
items.splice(index, 1);

VS

this.state.items.filter(i => ...);

还可以考虑性能。例如检查这个测试

2021-06-07 22:13:12
是的,取决于您的环境、测试等。但我不会担心这个,因为它在浏览器中运行。如果是每秒处理数百个请求的服务器调用,那么我会优先考虑性能,否则不会。使用最易于维护的代码。
2021-06-15 22:13:12
 const items = [...this.state.items]; // spread
 const mutatedItems = this.state.items.filter(() => {}) // filter

他们是一样的。
尽管我发现展开线令人困惑,而且不如过滤器直观。

但我更喜欢解构:

 const { items } = this.state // destructure
 item.splice()

为什么?因为有时在函数/方法中我还有其他解构赋值,例如

  const { modalVisible, user } = this.state

所以我想为什么不在item那里解构对于一些在多个代码库中编写大量代码的人来说,研究“此代码浏览的准确度和速度如何?”会有很大帮助。因为我自己真的不记得我上周写了什么。
虽然使用传播会让我写更多的行并且在下个月重新阅读时对我没有帮助。

在您的示例中,您state无需经历即可改变setState()
2021-05-22 22:13:12
items当你改变时,解构仍然会保持对相同的引用和变异items
2021-05-27 22:13:12
哦,对不起,我认为只有当它是一个对象时它才会保持引用。
2021-05-28 22:13:12
但是这个方法改变了 this.state
2021-06-13 22:13:12