react的setSate的异步问题的分析

本篇文章给大家带来的内容是关于react的setsate的异步问题的分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在我们阅读文档的时候，大多都说react的setState是异步的，可是它真的是异步的吗？如果是，那我们还可以猜想：那可以不可以同步？那什么时候需要异步，什么时候需要同步呢？

我们先来看下react的官方对setSate的说明：

将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。

一个很经典的例子：

// 初始state.count 当前为 0componentDidMount(){    this.setState({count: state.count + 1});    console.log(this.state.count)}

登录后复制

如果你熟悉react，你一定知道最后的输出结果是0，而不是1。

我们再来看一个例子

class Demo extends Component {  constructor(props) {    super(props);    this.state = { number: 0 };  }  render() {    return 点我;  }  componentDidMount() {    //手动绑定mousedown事件    this.refs.button.addEventListener(      "mousedown",      this.onClick.bind(this)    );       //setTimeOut    setTimeout(this.onClick.bind(this), 1000);  }  onClick(event) {    if (event) {      console.log(event.type);    } else {      console.log("timeout");    }    console.log("prev state:", this.state.number);    this.setState({      number: this.state.number + 1    });    console.log("next state:", this.state.number);  }}export {Demo};

登录后复制

在这个组件中采用3中方法更新state

 1.在p节点中绑定onClick事件 2.在componentDidMount中手动绑定mousedown事件 3.在componentDidMount中使用setTimeout调用onClick

登录后复制

在点击组件后，你可以猜到结果吗？输出结果是：

timeoutprev state: 0next state: 1mousedownprev state: 1next state: 2clickprev state: 2next state: 2

登录后复制

结果似乎有点出人意料，三种方式只有在p上绑定的onClick事件输出了可以证明setState是异步的结果，另外两种方式显示setState似乎是同步的。

总结：
1.在组件生命周期中或者react事件绑定中，setState是通过异步更新的。
2.在延时的回调或者原生事件绑定的回调中调用setState不一定是异步的。

这个结果并不说明setState异步执行的说法是错误的，更加准确的说法应该是setState不能保证同步执行。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

以上就是react的setSate的异步问题的分析的详细内容，更多请关注【创想鸟】其它相关文章！