javascript - 为什么不使用 splice with spread operator 从 react 中的数组中删除项目？

Question

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

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

  this.setState({ items });
}

所以在这种情况下，当我记录 items 更改但 this.state.items 保持不变时。问题是，为什么大家用filter而不是用spreadsplice呢？它有什么缺点吗？

Answer 1

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

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

---

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

创建 this.state.items 的副本，因此一旦您执行 splice()，它就不会改变它们。

所以考虑到你的方法，它与 filter() 没有什么不同，所以现在它只是归结为一个品味问题。

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

对比

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

性能也可能被考虑在内。检查这个test例如。