1. this.setState不会立即生效
React中使用this.setState的对象用法时，不会立即改变组件中state的值
//更新状态
this.setState({count: count + 1}）；
这就会导致下面的操作达不到字面上直观的效果。
字面上看，调用incrementMultiple，应该会导致state加了3，实际上只增加了1。
function incrementMultiple() {
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
}
这是因为，this.setState并没有立即更改this.state，所以三次操作都在反复设置同一个值。
2. setState的函数用法
this.setState还可以接受一个函数作为参数。
React官网上说，这个函数接收两个参数，第一个是当前的state，第二个是当前的props，函数返回一个对象，与之前使用this.setState的返回对象相同，代表想对state的更改。
function increment(state, props) {
return {count: state.count + 1};
}
从上面的描述，我读到的两个意思，一个是：把一个函数作为参数传给this.setState，那这个函数不管叫什么，他都有两个入参；第二个是：这个函数的第一个参数是当前的state,第二个参数是当前的props，不管他们叫什么。
用着试试吧，把这个入参打印出来，入参就顽皮地叫做cc吧
function plusone(cc, props){
console.log(cc);
return{count: cc.count + 1};
}
class AddByFunction extends React.Component {
constructor(props){
super(props);
this.state = {count: 0};
this.increment = this.increment.bind(this);
}
increment() {
this.setState(plusone);
this.setState(plusone);
}
render(){
console.log('cc');
return (
<div>
<button onClick={this.increment}>AddByFunction</button>
<h2>Result:{this.state.count}</h2>
</div>
);
}
}
ReactDOM.render(
<AddByFunction />,
document.getElementById('root')
);
image.png
点击一次按钮，确实实现了累加两次的效果，从控制台的打印也可以看出来，入参cc是一个state对象，并且每次调用plusone之前，cc都合并了之前的状态修改结果。
这样一来，用函数方式来使用setState，就更符合直观的逻辑了
