react之中的setState

为什么setState设置为异步？

在组件生命周期或者React合成时间之中,setState是异步的。（react之中的onClick、e…都是合成事件不是原生事件）
1、如果每次调用setState都进行一次更新，render函数会频繁调用，界面多次重新渲染，效率很低。异步之后获取多个更新，批量更新，题高性能。
2、如果把setState设置为同步，更新了state，还没有执行render函数，那么传送给子组件的state不能够保持同步，会产生一定的问题。

获取异步更新之后的数据

由于异步，下面进行输出的是原本的数据，不是修改之后的数据。

 this.setState({
 	num:99;
 })
 console.log(this.state.num);//输出原本数据不是99

1、this.setState的第二个参数进行获取
this.state(更新的state,回调函数)

 this.setState({
 	num:99;
 },()=>{
 	console.log(this.state.num);//输出数据是99
 })

2、componentDidUpdate()

componentDidUpdate(){
	console.log(this.state.num)
}

setState同步情况

同步异步还是需要根据具体情况进行：
1、在setTimeout中更新

change(){
	setTimeout(()=>{
		this.setState({
			num:99
		});
		console.log(this.state.num);//输出数据是99,最新更新的
	},0)
}

2、在原生的DOM事件中：
如果把下面代码放在addEventListener外部则又是异步事件。
按下面的代码是同步操作

componentDidMount(){
	const btn=document.getElementById("btn");
	btn.addEventListener('click',()=>{
	 	this.setState({
			num:99
		});
		console.log(this.state.num);//输出数据是99,最新更新的
	})
}

setState的合并

1、数据合并
原本的状态如下：

	this.state={
	name:jack,
	num:99
	}

其后更新状态：修改之后的状态变其中name覆盖，但是num依旧保留。

	this.setState({name:haoke})

原因是其中的机理是采用Object.assign,操作的大致如下

Object.assign({},this.state,{name:haoke})

2、setState自身的合并
以下情况自身被合并，num只在原本的值上加一

change(){
	this.setState({num:this.num+1});
	this.setState({num:this.num+1});
	this.setState({num:this.num+1});
}

每次执行如下：第一次返回的是{num:100},其后传入的两个参数对比都是一样的，都被合并了

Object.assign({},{num:99},{num:100})

3、setState合并时累加
当setStatec传入的是一个函数的时候,如下操作最后num加3

change(){
	this.setState((prevState,props)=>{
		return{
			num:prevState.num+1
		}
	});
	this.setState((prevState,props)=>{
		return{
			num:prevState.num+1
		}
	});
	this.setState((prevState,props)=>{
		return{
			num:prevState.num+1
		}
	});

}