ReactJS中的prevState是什么?

Question

我认为这个问题可能是愚蠢的问题，但相信我，我是初学者，可以做出反应JS。有人可以解释一下为什么我们在ReactjS 中使用 prevState.我努力理解但失败了.

这是我的代码。请帮助我理解

state = {
placeName : '',
places : []
}

placeSubmitHanlder = () => {
if(this.state.placeName.trim()===''){
return;
}
this.setState(prevState => {
return {
places : prevState.places.concat(prevState.placeName)
};
});
};

Answer 1

prevState

是你为传递给setState回调函数的参数指定的名称。它所持有的是 React 触发setState之前的状态值;由于setState执行批处理，因此当您想要根据以前的状态值更新新状态时，了解以前的状态有时很重要。

因此，如果多个 setState 调用正在更新相同的状态，则批处理 setState 调用可能会导致设置不正确的状态。考虑一个例子：

state = {
count: 0
}
updateCount = () => {
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
}

在上面的代码中，您可能期望 count 的值为 4，但实际上它将为 1，因为上次调用 setState 将在批处理期间覆盖任何以前的值。解决此问题的一种方法是使用函数 setState：

updateCount = () => {
this.setState(prevstate => ({ count: prevstate.count + 1}));
this.setState(prevstate => ({ count: prevstate.count + 1}));
this.setState(prevstate => ({ count: prevstate.count + 1}));
this.setState(prevstate => ({ count: prevstate.count + 1}));
}

Answer 2

当您想要使用最后一个状态的参数覆盖当前状态时，可以使用它。

来自 React 文档：

根据 React 文档，"React 可以将多个setState()调用批处理到单个更新中以提高性能。由于this.props和this.state可能会异步更新，因此不应依赖它们的值来计算下一个状态。

"要修复它，请使用接受函数而不是对象的第二种形式的setState()。该函数将接收以前的状态作为第一个参数，并将应用更新时的 props 作为第二个参数">

链接

Answer 3

这是一个带有注释掉代码的演示，可为您提供更多信息： http://codepen.io/PiotrBerebecki/pen/rrGWjm

constructor() {
super();
this.state = {
value: 0
}
}

反应文档：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

[React ES6 class] API 类似于 React.createClass，但 getInitialState 除外。无需提供单独的 getInitialState 方法，而是在构造函数中设置自己的状态属性。

prevState从何而来？

prevState 来自 setState api： https://facebook.github.io/react/docs/component-api.html#setstate

也可以传递带有签名函数(状态，props)的函数。在某些情况下，当您想要在设置任何值之前查询 state+props 的先前值的原子更新时，这可能很有用。例如，假设我们想在状态中递增一个值：

this.setState(function(previousState, currentProps) {
return {
value: previousState.value + 1
};
});