為什么 setState 是異步的？原理是？

1、setState為什么是異步的、什么時候是異步的？

setState本身的執行過程是同步的，只是因為在react的合成事件與鈎子函數中執行順序在更新之前，所以不能直接拿到更新后的值，形成了所謂的異步；

2、能不能同步，什么時候是同步的？

可以同步，在ajax、原生事件與setTimeout中是同步的

3、驗證

代碼中也包含了關於react批量更新優化的驗證：

在合成事件與鈎子函數中會對多次setState進行更新優化，只執行最后一次；

在原生事件與setTimeout內不會進行批量更新優化；

//測試setState同步與異步

//關於react的批量更新優化
//在react的合成事件函數與鈎子函數中會進行批量更新優化
//多次調用setState只會調用最后一次
class App extends React.Component{
    constructor(props){
        super(props);
        this.state={
            num:1
        }
    }
    componentDidMount(){
        this.clickFunc();
    }
    //num增加
    //合成事件、鈎子函數內進行了批量更新優化
    addNum(e){
        console.log('react合成事件函數');
        this.setState({num:this.state.num+1});
        this.setState({num:this.state.num+1});
        this.setState({num:this.state.num+1});
        this.setState({num:this.state.num+1});
        console.log(this.state.num);
    }
    //原生點擊事件的處理函數
    //原生事件與setTimeout中不會進行批量更新
    clickFunc(){
        document.querySelector('#btn').addEventListener('click',()=>{
            console.log('原生事件處理函數開始');
            this.setState({num:this.state.num+1});
            console.log(this.state.num);
            this.setState({num:this.state.num+1});
            console.log(this.state.num);
            this.setState({num:this.state.num+1});
            console.log(this.state.num);
            this.setState({num:this.state.num+1});
            console.log(this.state.num);
            console.log('原生事件處理完成');
        })
    }
    render(){
        return(
            <div>
                <h1>{this.state.num}</h1>
                {/* react的合成事件 */}
                <button onClick={(e)=>{this.addNum(e)}}>React合成事件的按鈕</button>
                {/* 原生DOM事件 */}
                <button id='btn'>綁定原生DOM事件的按鈕</button>
            </div>
        )
    }
}
ReactDom.render(<App/>,document.querySelector('#app'));

4、驗證結果

點擊React合成事件的按鈕

點擊綁定原生DOM事件的按鈕