class Example extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次 log
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次 log
}, 0);
}
render() {
return null;
}
};
答案 ： 0，0,2,3
setState由react 引发的事件处理，是异步（合并）更新，除此以外的是同步的。
所以第一次和第二次是异步（合并）更新，这里取到的this.state.val=0,所以两次都是赋值为1（只执行一次）。前两次console.log()出来的结果都是0。setTimeout中，setState是同步的，所以第三次console出来是2，第四次conosle出来是3。
为什么setState由react 引发的事件处理是异步（合并）更新，因为react引发事件会将isBatchingUpdates设置为true.而setState根据该变量判断是放入队列中还是回头再说。
