React的setState理解

總體來說還是這張圖片

var state = {count:0};//真實state
var dirtyState = {};//臨時state
var flag = false//是否處於事務中
var wrapper = {
    init:function(){
        console.log("事務執行之前的初始化");
    },
    close:function(){
        flag = false;
        console.log("事務執行之後的關閉");
    }
};
function transaction(){
    wrapper.init();
    //還沒有執行到這裏的時候的所有主程序執行的setState,都還沒有更新
    Object.assign(state,dirtyState);
    wrapper.close();
}
function update(partiState){
    if(!flag){
        flag = true;
        Object.assign(dirtyState,partiState);
    }else{
        transaction();
    }
}
function setState(partiState){
    update(partiState);
}
//調用2次setState
setState({count:realState.count+1});
setState({count:realState.count+1});

結果

總結

當初知道javascript中沒有線程，那是怎麼異步setState呢;現在有點明白異步是什麼概念了:當前操作保存起來，延後執行。相當於後臺批處理的時候可以先返回結果，但是此時數據並沒有真正到數據庫中，只是放到一個隊列中用線程來慢慢執行