setState

一、setState在哪？

setState存在于父组件Component上，每个自定义的组件继承之后都能调用。

二、为什么要使用setState

我们无法手动调用render，当我们使用setState时，react会自动帮我们调用render

setSate一定是异步的吗？

情况一：异步（在组件生命周期或React合成事件中）

• setSate设计成异步，可以显著的提升性能：
  （1）如果每次调用setState都进行一次更新，那就意味着render函数会被频繁调用，界面会被重新渲染，这样的效率是很低的。
  （2）最好的办法是获得多个的更新，之后进行批量更新。

• 如果同步更新了state，但是如果还没有执行render函数，state和props就不能保持同步：
  （1）如果state和props不能保持一致性，在开发中会产生很多问题。

如何拿到setState更新后的数据

• 方法一：获取异步更新后的数据

this.setState({
	message:"hello React"
}, ()=>{console.log(this.state.message)})

• 方法二：

componentDidupdate(){
	console.log(this.state.message)
} //该方法会在render之后被调用

比起方法一，方法二会先打印

情况二：同步（在setTimeout或原生DOM事件中）

• 情况一：

setTimeout(()=>{
	this.setState({
	message:"hello React"
})
console.log(this.state.message)
})

• 情况二：

<button id="btn">点击</button>
componentDidupdate(){
	document.getElementById("btn").addEventListenr('click',()=>{
		this.setState({
			message:"hello React"
		})
		console.log(this.state.message)
	})
} //该方法会在render之后被调用

react通过上下文的不同情况，来返回setState是同步还是异步（源码）

---

setState数据的合并

setState使用assign方法来进行数据合并

Object.assign({},prevState,partialState)

多次调用setState，只有最后一次会生效。
setState中传入函数，则会每次调用都生效

setState为什么最好不更新自身

当我们使用shouldComponentUpdate时，我们会比较原来的state和新的state，比较的时候，算法使用的是state中属性变量的内存地址的比较，如果我们更新原来的state作为新的state，那么新的state和旧的state的内存地址并没有发生变化，会导致shouldComponentUpdate更新失败。