react18之前。
setState在不同情况下可以表现为异步或同步。
在Promise的状态更新、js原生事件、setTimeout、setInterval..中是同步的。
在react的合成事件中,是异步的。
react18之后。
setState都会表现为异步(即批处理)。
官方详细说明。
react17和react18中setState在setTimeout中的表现
实例代码:
export default class Test extends Component {
state = {
num: 0
}
hClick = () => {
setTimeout(() => {
console.log('before----', this.state.num)
this.setState({num: this.state.num+1})
console.log('after----', this.state.num)
}, 1000)
}
render() {
return (
<div>
React 17/18
<hr />
{this.state.num}
<button onClick={this.hClick}>+1</button>
</div>)
}
}
同样代码在react17和react18中的表现如下: