setState与异步

场景

学过react的人都知道，react的setState是异步的，如

state = {
    text: "111"
}
handleChange() {
	this.setState({
		text: "222"
	})
	console.log(this.state.text)  // 111
}

得到的结果，是111，而不是我们期望中的222，而一般我们的解决办法都是，传入第二个回调函数

state = {
    text: "111"
}
handleChange() {
	this.setState({
		text: "222"
	}, function() {
		console.log(this.state.text)  // 222
	})
}

第二个回调函数，就会在异步执行完成之后触发。
很多人都觉得，这样的异步操作，使得代码写起来更麻烦的，但是你知道react为什么要把setState设置成异步的吗？？？？

高效地批量更新

在react的中，更新state的操作，即setState，会把修改state的更新操作，放到一个队列中，而不会马上执行。当组件进入可更新state的状态的时候，会在队列中把所有可以更新的state进行更新操作，即实现了 高效地批量更新state

提高性能

举一个简单的例子，有一个对话框组件，假如更新的同步的，那么收到信息的瞬间，就去更新state数据。此时如果有很多信息一直发过来，然后每次收到一条信息，就去同步更新一次，会浪费了好多性能，而且由于一直更新state，导致组件也一直被重新渲染，用户的体验也会很不好。
而更新是异步的话，也仅仅有几毫秒的延迟，用户也几乎感觉不到，并且可以将很多的更新一次性的批量更新，性能也会大大提升