setState的函数用法

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 (
            

                AddByFunction
                
Result:{this.state.count}
            
        );
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

image.png

点击一次按钮，确实实现了累加两次的效果，从控制台的打印也可以看出来，入参cc是一个state对象，并且每次调用plusone之前，cc都合并了之前的状态修改结果。

这样一来，用函数方式来使用setState，就更符合直观的逻辑了

参考：
setState：这个API设计到底怎么样
State and Lifecycle