最近在面试的时候有被人问到在react中重复调用setState会发生什么情况。多次setState后，state的值会被修改成什么？会触发几次shouldComponentUpdate事件？一个事件循环机制就可以说的明明白白！
一、 什么是事件循环机制
Event Loop即事件循环，是解决javaScript单线程运行阻塞的一种机制。
事件循环机制详解地址
二、 验证
模拟setState运行，同时验证setTimeout和Promise的执行先后顺序。
1、首先定义一个初始对象和类
//原始值
var state = {
a: 1,
b: 2
}
var obj1, obj2;
//定义一个单例对象
//定义一个单例对象
var UpdateObject = (function(state) {
var _timeout = null; //定义setTimeout对象
var singleCase = null; //单例对象
/* 返回一个闭包，可以读取_timeout */
return function(data) {
if (!data || data.constructor !== Object) {
console.error(`data=${data}不是Object对象`)
return;
}
/* 外部定义this对象 */
var _self = this;
/* 定义一个事件循环内的回调事件数组 */
this.allCallbackEvents = [];
/* 定义setState方法 */
this.setState = function(obj, callback) {
if (obj.constructor !== Object) {
console.error(`obj=${obj}不是Object对象`)
return;
}
console.log('我来记录一下执行顺序');
//记录回调事件。并不会马上执行
if (typeof callback === 'function') {
this.recordAllCallback(callback);
}
if (!_timeout) {
//准备一个宏任务的异步任务
_timeout = window.setTimeout(function() {
_self.dispatchAllCallbackEvent(state);
_self.clearAllCallback();
_timeout = null;
}, 0);
//准备一个微任务
new Promise(function(resovle, reject) {
resovle(state)
}).then(function(thisData){
console.log("按道理我比setTimeout后定义，应该后执行！")
console.log("实际上我先执行了！")
});
}
Object.assign(state, obj);
}
/* 记录回调事件的方法 */
this.recordAllCallback = function(event) {
this.allCallbackEvents.push(event);
}
/* 执行所有的回调 */
this.dispatchAllCallbackEvent = function(data) {
this.allCallbackEvents.forEach(function(event, index) {
event(data);
})
}
/* 清除回调事件 */
this.clearAllCallback = function() {
this.allCallbackEvents = [];
}
/* 修改state初始化值 */
console.log('我是构造函数传过来的data', data);
Object.assign(state, data);
console.log('我是state', state);
//返回单例
if (singleCase) {
return singleCase;
} else {
singleCase = this;
}
}
})(state);
2、 定义一个button点击执行setState方法
<body>
<button type="button" onclick="setState()" style="width: 200px;height: 200px;display: block;margin: 0 auto;margin-top: 200px;">点我验证循环机制，F12查看输出详情</button>
</body>
3、定义setState方法,模拟setState过程，验证猜想结果
//修改data的值
function setState() {
obj1.setState({
a: '我是a'
}, function(data) {
console.log('回调1里的data', data);
});
obj1.setState({
b: '我是b'
}, function(data) {
console.log('回调2里的data', data);
});
obj2.setState({
c: '我是c'
}, function(data) {
console.log('回调3里的data', data);
});
}
4、初始化组件
window.onload = function() {
obj1 = new UpdateObject({
a: 3,
c: 4
});
console.log("现在的state初始值为多少?", state);
obj2 = new UpdateObject({
a: 1,
c: 5
});
console.log("现在的state初始值为多少?", state);
var obj3 = new UpdateObject(1);
console.log("obj3返回的是什么?", obj3);
//确定是单例
console.log("是单例吗?", obj1 === obj2);
}
5、结果展示
页面初始化完成后打印信息
图片.png
点击button执行setState方法后打印信息
图片.png
三、结论
1、同一次执行中（主线程）多次有效调用objx.setState，最后state的结果为多个参数的合并值。
2、同一次执行中（主线程）多次有效调用objx.setState，需要等宏任务同步任务完成，才会去执行微任务Promise,，最后才会去执行宏任务的异步任务setTimeout
