将setState异步操作改为同步

异步的情况

由React控制的事件处理函数，以及生命周期函数调用setState时表现为异步 。大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等（合成事件中）以及钩子函数中，这些事件处理函数中的setState都是异步处理的。

同步的情况：

React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval，ajax，promise.then内等 React 无法掌控的 APIs情况下，setState是同步更新state的。

将setState异步操作改为同步

1.async await方法

setState本身为异步，可以模仿promise处理异步的方法，外层包裹匿名函数加async，并await setState方法的结果；

2.Promise方法

将异步包含在Promise对象中再返回promise对象，再用async和await组合调用实现，原理和async await方法 一样；

3.setTimeout方法

原理暂时没搞清楚/(ㄒoㄒ)/~~，setState进微队列，setTimeout进宏队列，宏队列在微队列之后执行？

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            age: 18,
        };
    }
    // 1.async await方法
    update = (async () => {
        await this.setState({ age: this.state.age + 1 })
        console.log(this.state.age);
    }
    )


    /*  2.Promise方法
     async update() {
             await this.setStateAsync({ age: this.state.age + 1 })
             console.log(this.state.age);
     }
     setStateAsync = (state) => {
             return new Promise((resolve) => {
             this.setState(state, resolve);
         })
     } */

    /* 3.setTimeout方法 
    update = (() => {
        setTimeout(() => {
            this.setState({ age: this.state.age + 1 })
            console.log(this.state.age);
        }, 0);
    }
    ) */
    render() {
        const { age } = this.state;
        return (
            <div>
                <span>{age}</span><br />
                <button onClick={this.update}>+1</button><br />
                {/* <button onClick={this.update.bind(this)}>+1</button><br /> */}
            </div>
        )
    }
}