多个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

阅读更多

没有更多推荐了,返回首页