新手请教一个关乎react的state的问题

#1

本人初学react
知道react 通过 setState() 更新状态
有一个疑问,如果 setState() 传入的是当前状态的引用

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

这时候由于新的this.state.items保存的是之前的引用, 所以实际新旧两个状态的items 都被pop出了一个元素,react 怎么确定这两个状态有差异,然后进行更新的呢?

items.pop() 后 prevState.items 的最后一个元素已经去除了,这时候 nextState.items 跟 prevState.items 不就一样了吗。
如果是

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

我能想得通,毕竟 this.state.items 没有变。。

#2

建议仔细看文档 setState 是 一个 异步操作 , 修改成功后 会有一个回调函数

this.setSate({items}, () => {

})
1 Like
#4

能详细说说吗,我知道setState() 是异步执行的。上面的代码中,items.pop() 把当前状态的items的元素也改了,所以我不知道新旧状态都一样,怎么来的差异。

#5

通过手动调用setState()方法来触发virtueDiff,以此对比前后来个状态的不同 这个算法你想深入了解 就去看源码吧

#7

说的对 要想处理数据就要 用回调函数 或者 setTimeOut(()=>{},500) 这样也可以

#8

这位哥们根本不是在说回调函数的事情。

他的意思大概是 this.state.items 是个数组, 是引用类型, this.state.items.pop(); 之后, 引用类型的数据并没有变化, React 是如何响应到这两个状态差异的。

其实我所理解的 ( 就是说不一定对 ) 的原理是这样的。
setState 会根据当前的state值去回执一套新的 visualDom, 真正去对比的其实 是 visualDom, 与数据类型的state值并没有太大的关系。