setState是同步的还是异步的?
生命周期和合成事件中
在 React的生命周期和合成事件中, React仍然处于他的更新机制中,这时无论调用多少次 setState
,都会不会立即执行更新,而是将要更新的·存入 _pendingStateQueue
,将要更新的组件存入 dirtyComponent
。
当上一次更新机制执行完毕,以生命周期为例,所有组件,即最顶层组件 didmount
后会将批处理标志设置为 false。这时将取出 dirtyComponent
中的组件以及 _pendingStateQueue
中的 state
进行更新。这样就可以确保组件不会被重新渲染多次。
componentDidMount() { this.setState({ index: this.state.index + 1 }) console.log('state', this.state.index); }
所以,如上面的代码,当我们在执行 setState
后立即去获取 state
,这时是获取不到更新后的 state
的,因为处于 React的批处理机制中, state
被暂存起来,待批处理机制完成之后,统一进行更新。
所以。setState
本身并不是异步的,而是 React的批处理机制给人一种异步的假象。
异步代码和原生事件中
componentDidMount() { setTimeout(() => { console.log('调用setState'); this.setState({ index: this.state.index + 1 }) console.log('state', this.state.index); }, 0); }
如上面的代码,当我们在异步代码中调用 setState
时,根据 JavaScript的异步机制,会将异步代码先暂存,等所有同步代码执行完毕后在执行,这时 React的批处理机制已经走完,处理标志设被设置为 false,这时再调用 setState
即可立即执行更新,拿到更新后的结果。
在原生事件中调用 setState
并不会出发 React的批处理机制,所以立即能拿到最新结果。
最佳实践
setState
的第二个参数接收一个函数,该函数会在 React
的批处理机制完成之后调用,所以你想在调用 setState
后立即获取更新后的值,请在该回调函数中获取。
this.setState({ index: this.state.index + 1 }, () => { console.log(this.state.index); })
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » setState是同步的还是异步的?
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » setState是同步的还是异步的?