React 中setState更新state何时同步何时异步？
先说结论
- 由
React控制的事件处理程序，以及生命周期内调用setState是异步更新state React控制之外的事件中调用setState是同步更新state，比如原生js绑定事件、setTimeout/setInrerval等。
setState的“异步”并不是说内部由异步代码实现，本身的执行过程和代码都是同步的。
之所以会有一种异步方法的表现形式，归根结底还是因为React框架本身的性能机制所导致的。因为每次调用setState都会触发更新，异步操作是为了提高性能，将多个状态合并一起更新，减少re-render调用。
我们来看一些例子：
React封装事件
代码语言：javascript复制state = {
number: 1
}
componentDidMount() {
this.setState({ number: 3 });
console.log(this.state.number); // 1
}由此可见该事件处理程序中的setState是异步更新state的。
setTimeout
代码语言：javascript复制state = {
number: 1
}
componentDidMount() {
setTimeout(() => {
this.setState({ number: 3 });
}, 0);
console.log(this.state.number); // 3
}上面我们讲到，setState本身并不是一个异步方法，之所以会变现出一种异步的形式，是因为React框架本身的一种性能优化机制。那么基于这一点，假如我们能绕过React的机制，就可以令setState以同步的形式体现。
原生事件
代码语言：javascript复制state = {
number: 1
}
componentDidMount() {
document.body.addEventListener('click', this.resetState, false);
}
resetState() {
this.setState({ number: 3 });
console.log(this.state.number); // 3
}同样的，原生事件也可以绕过React的性能优化机制，达到同步更新的表现。
React是如何控制异步和同步的？
在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是否直接更新this.state，还是放入队列中延时更新。
而isBatchingUpdates默认是false，标识setState是同步更新this.state。但是有一个函数batchedUpdates会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会先调用这个函数将isBatchingUpdates修改为true。这样由React控制的事件处理过程setState就不会同步更新this.state。
function enqueueUpdate(component){
//injected注入的
ensureInjected();
//如果不处于批量更新模式
if(!batchingStrategy.isBatchingUpdates){
batchingStrategy.batchedUpdates(enqueueUpdate, component);
return;
}
//如果处于批量更新模式
dirtyComponents.push(component);
}
事实上setState内部的执行过程是很复杂的，大致过程包括更新state，创建新的VNode，再经过diff算法对比差异，决定渲染哪一部分以及怎么渲染，最终形成最新的UI。这一过程包含组件的四个生命周期函数：
shouComponentUpdatecomponentWillUpdaterendercomponentDidUpdate
如果是子组件并且依赖父组件，还会执行一个钩子函数componentWillReceiveProps。
假如setState是同步更新的，每次更新这个过程都要完整执行一次，无疑会造成性能问题。事实上这些生命周期为纯函数，对性能还好，但是diff比较、更新DOM总消耗时间和性能吧。
在“异步”中如果对同一个值进行多次setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行。
state = {
number: 1
}
handleClick() {
const number = this.state.number;
this.setState({ number: number 1 });
this.setState({ number: number 1 });
this.setState({ number: number 1 });
}最终的结果只加了1。
如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。
hanldeClick() {
this.setState({ name: 'Clearlove' });
this.setState({ age: 18 });
}在hanldeClick处理程序中调用了两次setState，但是render只执行了一次。因为React会将多个this.setState产生的修改放在一个队列里进行批延时处理。
如何获取“异步”更新后的数据？
setState提供了一个回调函数供开发者使用，在回调函数中，我们可以实时的获取到更新之后的数据。还是以刚才的例子做示范：
state = {
number: 1
}
componentDidMount() {
this.setState({ number: 3 }, () => {
console.log(this.state.number); // 3
});
}
