React 篇之浅谈 setState is异步OR同步
react 篇主要是记录笔者之前在使用 React 进行开发时遇到的问题和坑, 趁还没有毕业 一 一 查阅文档资料总结归纳, 和大家一起分享, 以防重蹈覆辙.
这篇文章主要总结的是关于利用 setState 更改组件状态时遇到的一些坑, 希望会的小伙伴可以当做复习巩固,不会的可以当做学习.
setState 究竟是异步的还是同步的,为何有的时候是同步,有的时候异步呢?
setState 异步更新
案例
class Example extends React.Component{
constructor(){
super(...arguments)
this.state = {
count: 0
};
}
componentDidMount(){
//第一次更新状态
this.setState({count: this.state.count + 1});
console.log(this.state.count)
//第二次更新状态
this.setState({count: this.state.count + 1});
console.log(this.state.count)
setTimeout(() => console.log(this.state.count),0)
}
}
运行结果依次是:
0 0 1
这就有点纳闷了, 打印出来的不应该是 1 2 2 吗?
其实这里的状态更新是'异步'的, setState 是通过一个队列机制来实现state更新的, 当执行setState()时, 就会将需要更新的 state 合并 (浅合并!!) 后在放入状态队列中, 而不是立即更新 state, react 中的状态队列机制可以起到高效批量更新state
由此可以知道 React 的 setState 是通过状态队列机制实现的, 以此避免了重复的更新的 state
另外在上文提到的setState会将需要更新的state合并,这是怎么回事呢?
setState(nextState[,callback])
React 官方文档对 setState 有明确的介绍到:
当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state
举个例子:
this.setState({count: state.count + 1})
this.setState({count: state.count + 2})
this.setState({count: state.count + 3})
//结果的state.count 值为 0
当你同时对同一个或多个几个状态进行更新时,就等同于
this.setState(Object.assign(state,
{count: state.count + 1},
{count: state.count + 2},
{count: state.count + 3}
))
那么, 如果在开发中, 迫不得已需要对一个状态多次更新,但又要保证这个状态是可靠的,没方法了吗?
别急, 你可以想到的官方也有想到过, 要解决这个问题, 可以让 setState() 接收一个函数而不是一个对象. 这个函数用上一个 state 作为第一个参数, 将此次更新被应用时的 props 做为第二个参数.
使用方法:
//假设 this.props = {addVal: 1}
this.setState((preState,props) => ({
count: preState.count + props.addVal
}))
此时的setState()有点像数组的renduce(累加器)
//假设 this.props = {addVal: 1}
Array(upDateCount)
.fill(this.props)
.reduce((preState,props) => ({
count: preState + props.addVal
}),{count: 0})
// 最终 {count: 3}
setState 同步更新
案例
class Example2 extends React.Component{
constructor(){
super(...arguments)
this.state = {
count: 0
};
}
componentDidMount(){
setTimeout(() => {
//第一次更新状态
this.setState({count: this.state.count + 1});
console.log(this.state.count)
//第二次更新状态
this.setState({count: this.state.count + 1});
console.log(this.state.count)
},0)
}
}
运行结果依次是:
1 2
既然说 setState 是异步的, 那么结果应该是0 0,为何可以正常捕获到状态更新完的值呢, 然而setState不尽然在任何地方都是异步的, setTimeout 中调用以及原生事件中调用的话, 是可以立马获取到最新的 state 的.
其实在 React 中, 如果是由 React 引发的事件处理即合成事件(比如通过onClick引发的事件处理) 或者钩子函数(如生命周期函数等绑定事件函数), 调用setState不会同步更新this.state, 除此之外的setState调用会同步执行this.state, 所谓'除此之外'，指的是绕过 React 通过addEventListener(原生事件)直接添加的事件处理函数, 还有通过setTimeout/setInterval(定时器)产生的异步调用。
那么 React 究竟何时处于异步,何时同步呢?
在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdate 来判断是直接同步更新 this.state 还是放到队列中异步更新 。React 使用了事务的机制，React 的每个生命周期和合成事件都处在一个大的事务当中。在事务的前置钩子中调用 batchedUpdates 方法修改 isBatchingUpdates 变量为 true，在后置钩子中将变量置为 false。原生绑定事件和 setTimeout 异步的函数没有进入到 React 的事务当中，或者当他们执行时，刚刚的事务已近结束了，后置钩子触发了，所以此时的 setState 会直接进入非批量更新模式，表现在我们看来成为了同步 SetState。
关于 React 中的setState何时属于异步,何时异步点到为止, 笔者目前能力有限(学不过来),只能在自己的理解范围内讨论, 只能在今后的码路上继续前进,进一步深入了解