欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React的setState理解

程序员文章站 2024-03-02 16:52:52
...

总体来说还是这张图片

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});

结果

React的setState理解

总结

当初知道javascript中没有线程,那是怎么异步setState呢;现在有点明白异步是什么概念了:当前操作保存起来,延后执行。相当于后台批处理的时候可以先返回结果,但是此时数据并没有真正到数据库中,只是放到一个队列中用线程来慢慢执行
React的setState理解