react setState 伪代码实现

我们大家都知道 react 的 setState 是异步的（也可以理解成同步的），在react 组件声明周期内的多次 setState 会进行合并处理。

看下面代码

	
    componentDidMount(){ 	
        this.setState({	
            count:0	
        })	
        this.setState({	
            count: 1	
        })	
        this.setState({	
            count: 2	
        })	
        this.setState({	
            count: 3	
        });	
        console.log(this.state);	
    }

‍

setState 内部将数据进行合并，主要使用了共享结构，下面是模拟的伪代码实现。

function React(){	
    this.state={}; 	
    this.nextState=null;//保存合并后的state	
    this.renderEndCallback=[];//保存回调方法	

	
}	

	
React.prototype.setState=function(obj,callback){	
    //obj是对象	
    if(obj && typeof obj === 'object'){//如果是对象则进行合并	
            this.nextState = {...this.state,...this.nextState,...obj};	
            if(typeof callback==='function'){	
                this.renderEndCallback.push(callback);	
            }	
    }	

	
    //obj 是函数	
    if(obj  && typeof obj==='function'){	
        this.nextState = this.nextState ? this.nextState:({...this.state});	
        var tempState = obj(this.nextState);//此处省略 props 参数	

	
        //进行state 的合并	
        this.nextState = {...this.state,...this.nextState,...tempState};	
    }	

	
}	

	
//获得最新 state	
React.prototype.getState=function(){	
    this.state={...this.nextState};	
    return this.state;	
}	

	
// 用来获得最新的state	
React.prototype.render=function(){	
   var state=this.getState();	
   this.renderEndCallback.forEach((fn)=>(fn.call(this)));	
}	

调用

	
var title = new React();	

	
title.state={	
    count:0,	
    name:'前端张大胖'	
}	

	
title.setState({	
    count:1	
});	

	
console.log(1,title.state);	

	
title.setState({	
    count:2	
},function(){	
    console.log(2,'callback',this.state);	
});	

	
console.log(3,title.state);	

	
title.setState((preState)=>{	
    return {	
        count:preState.count+3,	
        age:25,	
        address:'北京'	
    }	
});	

	

	
console.log(4,title.state);	

	

	
title.setState({	
    count:1	
});	

	

	
title.setState((preState)=>{	
    console.log(5,preState);	
    return {	
        count:preState.count+3	
    }	
});	

	
title.render();	

‍

执行结果

以上模拟代码并非是 react 内部实现逻辑，只是模拟实现了相同的的输出结果，如有问题还请指正。

 

觉得有用的话 请动动手

分享到朋友圈或者技术交流群

让更多人受益

长按关注 >>>

盘它

我就知道你在看！