每日一知识：React中setState的执行机制

本人入门React不久，这里做简单的记录，有错误请指出

React17及其之前版本中：

export default class App extends Component {
    state = {
        count: 1
    }
    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={this.handleAdd1}>add1</button>
                <button onClick={this.handleAdd2}>add2</button>
            </div>
        )
    }
    handleAdd1 = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count);

        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count);

        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count);

    }

    handleAdd2 = () => {
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            })
            console.log(this.state.count);

            this.setState({
                count: this.state.count + 1
            })
            console.log(this.state.count);

            this.setState({
                count: this.state.count + 1
            })
            console.log(this.state.count);
        }, 0)
    }
}

初始： 点击add1一次：

可以发现结果并不是想象中的点击add1，count连续加3次，而是合并更新一次。

React可能会出于性能的考虑，将多个setState调用合并成一个批处理更新操作

因此setState在同步的逻辑中是异步更新，异步更新Dom的 setState接受一个回调函数。如果想在更新完状态之后在进行操作，可以把处理逻辑放在回调函数中，这样就可以确保更新完成之后再进行处理

   handleAdd1 = () => {
        this.setState({
            count: this.state.count + 1
        }, () => {
            // 回调中状态和真实Dom已经更洗完了            
            console.log(this.state.count);
        })

        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log(this.state.count);
        })

        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log(this.state.count);
        })

    }

如下图：可以发现setState仍会合并，但是可以确保在状态更新完之后 因此可以得出结论：setState接受第二个参数，第二个参数是一个回调函数，回调中状态和Dom更新完后就会被触发

但是点击add2就不一样了

点击add2后，count连续加了三次，并没有合并。 handeAdd2中setState是处在定时器中的，是处在异步逻辑中的，因此setState在异步的逻辑中是同步执行，同步更新状态和Dom。

官网参考：setState