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呢;现在有点明白异步是什么概念了:当前操作保存起来,延后执行。相当于后台批处理的时候可以先返回结果,但是此时数据并没有真正到数据库中,只是放到一个队列中用线程来慢慢执行
这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章