const { items } = this.state;
this.setState({
items: this.state.items.slice(0, this.state.items.length - 1)
});
我知道上面的代码可以在react中很好的工作
然而,在这方面,
const { items } = this.state;
items.pop();
this.setState({ items });
我只是不知道为什么这仍然可以更新dom
,如果有一个列表呈现的this.state.items
(如<div className="list">{this.state.items}</div>
)。
我很疑惑items.pop()
已经改变了初始状态,下一个状态的物品不是和初始状态的物品一样吗?为什么这个还能更新dom
?
6条答案
按热度按时间41ik7eoe1#
如果我理解正确的话,您会想知道,如果您的突变也应用旧状态,为什么DOM会改变。你认为“如果我改变旧的状态,那么两个状态都指向同一个数组或对象的引用”。是的,你不是在这里创建一个全新的数组/对象,但React并没有寻找我认为的引用。
React寻找很多东西,但在你的例子中,它通过区分元素,数组的子元素来寻找DOM的变化。旧DOM比新DOM多一个元素。因此,它破坏旧的,并安装新的。
slsn1g292#
下一个状态的项不等于源状态的项,因为您正在使用数组可变方法(更多信息MDN可变方法)。这个
pop
方法直接修改数组,它不像其他方法那样生成副本(map, filter
没有可变方法)。8nuwlpux3#
调用
setState
将始终重新呈现组件。不管国家是否真的改变了。要改变这种行为,必须实现自定义的shouldComponentUpdate
。huwehgph4#
您使用的是
React.Component
而不是React.PureComponent
。默认情况下,react将在setState上重新呈现,或者如果父级重新呈现,即使props或state没有更改。然而,PureComponent在
shouldComponentUpdate
中进行相等性检查,因此如果所有的props和state都通过了严格的相等性检查===
(因此是pure),它将不会重新呈现。4nkexdtk5#
你的问题是为什么第二个代码块更新你的组件,即使组件状态没有改变?您发布的两个代码块都导致组件更新,因为您正在调用setState()。如果你看一下setState()的文档,它说“setState()将总是导致重新呈现,除非shouldComponentUpdate()返回false”。如果你不想让你的组件更新,那么不要调用setState()。
cl25kdpy6#
我有一个问题要补充
为什么这个代码工作?
但这不是吗?