Question

const { items } = this.state;
this.setState({ 
  items: this.state.items.slice(0, this.state.items.length - 1)
});

我知道上面的代码在反应中可以很好地工作

但是，

const { items } = this.state;
items.pop();
this.setState({ items });

我只是不知道为什么如果有dom所呈现的列表（如this.state.items）仍然可以更新<div className="list">{this.state.items}</div>。

我很困惑items.pop()更改了原始状态，不是下一个状态的项目等于原始状态的项目。为什么这仍然可以更新dom。

Answer 1

下一个状态的项与原始状态的项不相等，因为您正在使用数组可变方法（更多信息MDN Mutable Methods）。此pop方法直接修改数组，不会像其他方法一样生成副本（map, filter没有可变方法）。

Answer 2

调用setState将始终重新渲染该组件。状态实际上是否改变都没有关系。要更改此行为，您必须实现自定义shouldComponentUpdate。

Answer 3

如果我没看错，您想知道为什么如果您的突变也应用旧状态，DOM就会发生变化。您认为“如果我改变旧的变量，那么这两个状态都指向同一数组或对象的引用”。是的，您不是在这里创建全新的数组/对象，而是我想使用React does not look for the references。

React寻找许多东西，但在您的情况下，它通过扩散数组的元素（子元素）来寻找DOM更改。旧DOM比新DOM多一个元素。因此，它摧毁了旧的并安装了新的。

Answer 4

您使用的是React.Component而不是React.PureComponent。

默认情况下，即使props或state不变，react也将在setState上重新渲染，或者如果parent重新渲染，则react将重新渲染。但是，PureComponent在shouldComponentUpdate中进行相等检查，因此，如果所有道具和状态都通过严格的相等检查===（因此为纯），它将不会重新渲染。

Answer 5

您是一个问题，为什么即使组件状态没有更改，第二个代码块仍会更新您的组件？您发布的两个代码块都会导致组件更新，因为您正在调用setState（）。如果您查看documentation for setState()，它会显示“ setState（）将始终导致重新渲染，除非shouldComponentUpdate（）返回false ”。如果您不想更新组件，请不要调用setState（）。

为什么处于React状态的数组的pop（）或push（）方法可以工作

5 个答案: