深入理解React中的setState
组件的状态是一种保存、处理和使用给定组件内部信息的方法，并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object)，并且改变它是使组件重新进行渲染的几种方法之一。
这是react背后最基本的思路之一,但是它(状态)有一些使用起来很棘手的属性，可能会导致应用程序出现意外行为。
更新状态
组件中的构造函数是唯一一个你可以直接写this.state的地方，而在其他地方你应该使用this.setState，setState将接受最终合并到组件当前状态的一个对象或方法作为参数。
虽然技术上可以通过直接写入this.state来改变状态，但它不会导致组件使用新数据重新渲染，并且通常会导致状态的不一致。
setState是异步的
setState导致协调(重新渲染组件树的过程)的事实是基于下一个属性 — setState是异步的。这允许我们在单个范围内多次调用setState，而不是触发不需要重新渲染整个组件树。
这就是为什么在更新后没有在状态中看到新值的原因。
// assuming this.state = { value: 0 }
this.setState({
value: 1
});
console.log(this.state.value); // 0
react还会尝试将setState分组调用或批量调用到一个回调中，这会导致我们第一次“陷阱”。
// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
上面所有的调用过程结束后，this.state.value的值是1,而不是我们所期望的3。为了解决这个问题 …
setState接受一个方法作为它的参数
如果你在setState中传入一个函数作为第一个参数，React将以 at-call-time-current状态来调用它，并期望你返回一个对象来合并到状态中。所以更新我们以上的代码：
// assuming this.state = { value: 0 };
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
最终的结果将如我们所期望的this.state.value = 3，记住在将状态更新为值时始终使用此语法，该值是根据以前的状态计算的！
为什么setState是异步的？
记住你是如何知道setState是异步的？嗯，事实证明并非总是如此！这取决于执行上下文，例如：
render() {
return <button onClick={this.inc}>Click to update</button>
}
inc() {
console.log('before: ' + this.state.test);
this.setState({
test: this.state.test+1
});
console.log('after: ' + this.state.test);
}
点击按钮，然后在控制台的显示结果可能是：
// click!
before: 1
after: 1
// click!
before: 2
after: 2
但是如果我们新增以下代码：
componentDidMount() {
setInterval(this.inc, 1000);
}
结果是：
before: 1
after: 2
before: 2
after: 3
所以，我们应该学会何时期待什么行为吗？显然不是。可以肯定的是，假设setState确实是异步的，因为在将来的版本中它将是如此。
setState接受一个回调函数
如果你需要执行某个函数，或验证状态确实是否正确更新，你可以传递一个函数作为setState调用的第二个参数，一旦状态更新，该函数将被执行。记住，因为在一个范围内的所有更新是批量的，如果你有多次调用setState，则将使用完全更新后的状态调用每个回调。
在更新发生后确保代码执行的另一种方法是将其放在componentWillUpdate或componentDidUpdate中。然而，当使用shouldComponentUpdate来阻止更新的时候，相反上两个钩子函数是不用去使用的。
常见错误
其中最常见的一个错误是在构造函数中基于属性(props)来使用组件的state设置它的值。考虑以下的代码：
class Component extends React.Component {
constructor(props) {
super(props);
this.state = { value: this.props.value };
}
render() {
return <div>The value is: {this.state.value}</div>
}
}
如果其父组件如下面这样对它进行渲染：
<Component value={42} />
将正确渲染“The value is 42”，如果父组件改变了
<Component value={13} />
最后this.state.value的值依然是42，这是因为React并不会销毁和重新创建这个组件，它将重用一次渲染的组件，不会重新运行构造函数。为了解决这个，你不应将props分配给state而是在render方法中使用this.props.value。然而如果你决定使用state，你应该实现一个解决方案，它将在需要时更新状态，例如：
class Component extends React.Component {
constructor(props) {
super(props);
this.state = { value: this.props.value };
}
componentWillReceiveProps(nextProps) {
if(nextProps.value !== this.props.value) {
this.setState({value: nextProps.value});
}
}
render() {
return <div>The value is: {this.state.value}</div>
}
}
记住任何componentWill *函数都不是触发副作用的地方（例如进行AJAX调用），所以对于上面的情况请使用componentDidUpdate(previousProps, previousState)。
广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com
附录
我们可以预期setState会随着React Fiber及其他更改而发生一些变化。正如前面提到的，在大多数情况下setState是异步的，
另一个变化是使用函数语法可以终止“进行中”的setState调用:
this.setState((state) => {
if(checkSomeConditions()) return undefined;
else return { value: 42}
});
