reactjs 为什么在react状态下数组的pop()或push()方法可以工作

ecr0jaav  于 2023-06-22  发布在  React
关注(0)|答案(6)|浏览(147)
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

41ik7eoe

41ik7eoe1#

如果我理解正确的话,您会想知道,如果您的突变也应用旧状态,为什么DOM会改变。你认为“如果我改变旧的状态,那么两个状态都指向同一个数组或对象的引用”。是的,你不是在这里创建一个全新的数组/对象,但React并没有寻找我认为的引用。
React寻找很多东西,但在你的例子中,它通过区分元素,数组的子元素来寻找DOM的变化。旧DOM比新DOM多一个元素。因此,它破坏旧的,并安装新的。

slsn1g29

slsn1g292#

下一个状态的项不等于源状态的项,因为您正在使用数组可变方法(更多信息MDN可变方法)。这个pop方法直接修改数组,它不像其他方法那样生成副本(map, filter没有可变方法)。

8nuwlpux

8nuwlpux3#

调用setState将始终重新呈现组件。不管国家是否真的改变了。要改变这种行为,必须实现自定义的shouldComponentUpdate

huwehgph

huwehgph4#

您使用的是React.Component而不是React.PureComponent
默认情况下,react将在setState上重新呈现,或者如果父级重新呈现,即使props或state没有更改。然而,PureComponent在shouldComponentUpdate中进行相等性检查,因此如果所有的props和state都通过了严格的相等性检查===(因此是pure),它将不会重新呈现。

4nkexdtk

4nkexdtk5#

你的问题是为什么第二个代码块更新你的组件,即使组件状态没有改变?您发布的两个代码块都导致组件更新,因为您正在调用setState()。如果你看一下setState()的文档,它说“setState()将总是导致重新呈现,除非shouldComponentUpdate()返回false”。如果你不想让你的组件更新,那么不要调用setState()。

cl25kdpy

cl25kdpy6#

我有一个问题要补充
为什么这个代码工作?

function onClickRemoveHandler() {
    const newList = list.slice(0, -1);
    setList(newList);
  }

但这不是吗?

function onClickRemoveHandler() {
    const newList = list.pop();
    setList(newList);
  }

相关问题