React-setState的那些事儿
关于setState，使用过react的人应该再熟悉不过了，在hooks还不那么普及的时候，除了使用函数式组件，我们使用最多的应该就是类创建react的组件了，而在类组件中我们通常会使用state来管理组件的数据变化及更新。
setState的使用注意事项
setState(updater, callback)这个方法是用来告诉react组件数据更新渲染。
在使用setState改变状态之后，立刻通过this.state去拿最新的状态往往可能并不容易拿到的。
要点1：
基于此如果需要拿到最新的state，根据官方给的方法就是在‘componentDidUpdate或者在setState的第二个参数的回调函数中获取
componentDidMount(){
this.setState({
date: 3,
}, function(){
console.log('callback',this.state.date) // date为 3
});
console.log('fn',this.state.date) // date为1
}
要点2：
对于同时累加多次的问题
componentDidMount(){
this.setState({
date: this.state.date + 1,
});
this.setState({
date: this.state.date + 1,
});
this.setState({
date: this.state.date + 1,
});
}
// 最后date的值只累加了一次，为2
我们的目标值可能是4，但是react最后给出的与我们目标值不一样，这是因为react为了考虑性能问题，防止重复渲染将setState方法统一在渲染前统一进行，之后再进行render
如果想要得到4，推荐再setState传function
componentDidMount(){
this.setState((state) => {
return {date: state.date + 1}
});
this.setState((state) => {
return {date: state.date + 1}
});
this.setState((state) => {
return {date: state.date + 1}
});
}
// 最后得到目标值4
那么setState是同步的还是异步的？
从上面我们发现当我们在setState后没法立即拿到我们设置的值，可能很多人想说，因为setState是异步的。情况真的是这样吗，看下面的例子
// 定时器中
componentDidMount(){
setTimeout(() => {
this.setState({
date: 2
});
console.log('1111', this.state.date) // date为2
})
}
// 或者监听函数
componentDidMount(){
document.getElementById('button').addEventListener('click', this.clicks)
}
clicks = () => {
this.setState({
date:3,
})
console.log('addEventListener', this.state.date); // date为3
}
我们发现在在定时器或者是监听函数等原生方法中时，当我们设置setState，我们是可以同步的拿到最新的state的值得。
而根据react源码，和我个人的理解setState是其实用同步的操作来模仿的异步的行为。
我们知道react为了兼容各种浏览器，同时为了性能的考量有自己的合成事件，譬如onClick、onChang之类的。当我们在生命周期中或者合成事件中，setState将变成异步的行为，而在js原生事件中setState将变成同步的。
那react是如何区分的呢，其实可以简单的理解为，react对于异步的setState会给方法打上一个isBatchingUpdates，并将它放在一个处理state的队列中，当react其他任务执行完需要开始渲染前，将循环处理队列中的方法，同时更新state
而对于同步的setState则进行直接更新。
参考👏😬
