在 React 中使用 splice 更新状态答案

【问题标题】：Using splice to update state in React在 React 中使用 splice 更新状态
【发布时间】：2019-06-22 04:42:24
【问题描述】：

我正在学习 React，在其中一个答案中，我看到在从数组中删除项目时正在使用 splice 方法。链接到解决方案： Delete item from state array in react

要从数组中删除一个元素，只需这样做：

array.splice(index, 1); 在你的情况下：

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

预期：与许多其他博客一样，我们使用过滤器方法从列表中删除项目。为什么答案越来越受欢迎，而我们在这里没有使用过滤器方法？

【问题讨论】：

你的问题是什么，为什么使用拼接而不是过滤器？
filter 比 splice 更好，因为 filter 不会改变数组。正如您在答案列表中看到的那样，过滤方法获得了更多的赞成票，但接受的答案取决于提出问题的人。

标签： reactjs state mutable

【解决方案1】：

没有规则，比如用这个方法做那个，那个方法做这个。但是，要确保 React 知道状态的变化，需要满足两个条件。

使用setState 更新状态
需要使用新值或引用设置状态对象中的顶级键。 IE。在浅显的比较中显得不同。

您链接的接受的答案同时满足这两个要求。关键是，

var array = [...this.state.people]    // make a separate copy of the array

注意评论。原始海报明确表示他正在使用spread syntax 创建对数组的新引用。他稍后执行的拼接操作是在这个新数组上进行的，无论他稍后执行什么操作，React 都会在将新数组设置为状态的一部分时至少调用一次render方法。

为什么要过滤？

Filter 通过谓词过滤数组并返回一个带有结果的新数组对象。在某些情况下，这可能更灵活、更方便使用，但它具有完全不同的行为。 Splice 允许通过索引精确删除连续的元素块，而 filter 删除与谓词不匹配的所有元素。

根据最适合用例的方式来决定使用哪种方式。只要满足上述条件，React 就会重新渲染。

注意：在所呈现的情况下，过滤器将是性能最佳的选择，因为它只在数组上循环一次。拼接操作在它之前需要、展开和indexOf，这会导致对数组进行多次枚举。

【讨论】：