reactjs - 在 React 中使用 splice 更新状态

Question

我正在学习 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});
  }
},

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

Answer 1

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

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

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

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

注意注释。原来的海报已经明确表示他正在使用 spread syntax 创建对数组的新引用。 .他后面进行的拼接操作就是在这个新数组上进行的，无论他后面进行什么操作，React都会在新数组被设置为state的一部分时至少调用一次render方法。

为什么要过滤？

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

根据最适合用例的内容，由您决定使用哪个。只要满足上述条件，React 就会重新渲染。

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