多个setState方法的调用原理

React中通过使用setState来更新组件的状态，触发render

setState被调用时发生了什么？

React首先将你传递给setState函数的对象合并到当前状态中，然后创建一个React元素树，对比新旧树的差别，并根据你传递给setState函数对象的不同，计算出相应的变化部分，最终完成DOM更新

因为包含了大量的工作，调用setState可能并不会立即更新你的state，为异步的

如果在一个单独的函数中调用setState多余一次，React的处理方式？

React可能会出于性能的考虑，将多个setState调用合并成一个批处理更新操作

当遇到多个setState调用时，它会提取单次传递给setState的对象，把它们合并在一起形成一个新的单一的对象，并用这个单一的对象去做setState的事情

JS合并对象，可通过Object.assign()方法，且后一个key值会覆盖前面的key值

const a = {name : 'kong', age : '17'}
const b = {name : 'fang', sex : 'men'}
Object.assign({}, a, b);
//{name : 'fang', age : '17', sex : 'men'}

如果不想这样呢？试试函数式的setState

语法：

this.setState(function(state, props){
	return {
		name : state.name + ' hello'
	}
})
//该函数获取组件的上一次的状态和当前的属性，用于计算和返回下一个状态

此时，如果遇到多个setState的情况，它并不会把对象合并在一起，而是会按照调用的顺序排队，然后依次调用队列中的方法，把上一次的状态传递给当前的方法，从而不断的更新状态，这种处理方式很好的解决了，有些情况，需要通过上一次更新完的state来计算当前更新的state的值的时候，传递对象的方式因为异步，会有很大的隐患，所以使用函数式setState传递

changeStateThreeTest(){
	this.setState((state) => ({name : state.name + '1'}))
	this.setState((state) => ({name : state.name + '2'}))
	this.setState((state) => ({name : state.name + '3'}))
}

//React会把多个setState调用排列，可以想象成一个方法数组
const updateFunc = [
	(state) => ({name : state.name + '1'}),
	(state) => ({name : state.name + '2'}),
	(state) => ({name : state.name + '3'})
]

参考链接：

http://www.oschina.net/translate/functional-setstate-is-the-future-of-react