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

Question

splice() 会改变原始数组，应该避免。相反，一个不错的选择是使用filter()创建一个新数组，因此不会改变状态。但是我曾经使用带有扩展运算符的 splice() 从数组中删除项目。removeItem = index => {  const items = [...this.state.items];  items.splice(index, 1);  this.setState({ items });}所以在这种情况下，当我记录items更改但this.state.items保持不变时。问题是，为什么每个人都使用filter而不是splicewith spread？它有什么缺点吗？

Answer 1

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 => ...);

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

Answer 2

 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那里解构。对于一些在多个代码库中编写大量代码的人来说，研究“此代码浏览的准确度和速度如何？”会有很大帮助。因为我自己真的不记得我上周写了什么。

虽然使用传播会让我写更多的行并且在下个月重新阅读时对我没有帮助。