setState()的异步问题及解决办法

1.setState()作用

我们在使用state的时候,如果我们想要对里面的值进行改变,我们不能直接去改变sate里面的值,改了以后我们发现sate中的值并没有发生任何的变化,这个时候react给我们提供了setState()用于改变state中的值并对页面进行重新渲染,setState()是对组件 state 的值进行更新,并且通知react需要使用更新后的 state 对页面进行重新渲染,

2.setState()为什么会产生异步问题?

官网上是这样介绍的:为了提高性能React将setState设置为批次更新,即是异步操作函数,将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能,React 会延迟调用它,然后通过一次传递更新多个组件。React 并不会保证 state 的变更会立即生效。setState() 并不总是立即更新组件。它会批量推迟更新。这使得在调用 setState() 后立即读取 this.state 成为了隐患

3.解决办法

我们可以用setState() 的第二个参数回调函数来解决:

constructor(props) {

    super(props)

    this.state = {

       count:1,

    }

  }

this.setState({

       count: this.state.count + 1

    }, () => {

       console.log(this.state.count);//2

       console.log('加载完成')

    });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容