react的setState的行为，看不懂。。。

Question

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    state = {
        count: 0
    };
    add = this.add.bind(this);
    add() {
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
    }
    render() {
        return (
            <div className="App">
                {this.state.count}
                <button onClick={this.add}>click</button>
            </div>
        );
    }
}

export default App;

根据官方文档，重复setState count: this.state.count + 1 是只会加一次的

但是用了count: ++this.state.count 就不存在这个问题了。

谁能告诉我是怎么回事

Answer 1

React doesn't update this.state.count until the component is re-rendered

所以每次执行this.setState({count: this.state.count + 1})时，this.state.count都是0，最终 setState 的结果是1；
而 this.setState({count: ++this.state.count})每次执行时this.state.count都会自增+1，最终 setState 的结果就是this.state.count最终自增后的结果。

Answer 2

++this.state.count

这段代码相当于是

this.state.count = this.state.count + 1