首页 > web前端 > js教程 > 正文

react的setSate的异步问题的分析

不言
发布: 2019-03-23 09:55:54
转载
2065 人浏览过

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

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

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

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

一个很经典的例子:

// 初始state.count 当前为 0
componentDidMount(){
    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 <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
  }
  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
登录后复制

在点击组件后,你可以猜到结果吗?输出结果是:

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2
登录后复制

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

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

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

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

以上是react的setSate的异步问题的分析的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:segmentfault.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板