解读react的setSate的异步问题

atinosun 发布于2019-08-23 16:16 / 3332人阅读

摘要：总结在组件生命周期中或者事件绑定中，是通过异步更新的。在延时的回调或者原生事件绑定的回调中调用不一定是异步的。这个结果并不说明异步执行的说法是错误的，更加准确的说法应该是不能保证同步执行。

在我们阅读文档的时候，大多都说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 ;
  }
  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.在div节点中绑定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

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

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

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

个人学习总结，有错误的地方欢迎指正٩̋(๑˃́ꇴ˂̀๑)

GPU云服务器云服务器 java异步问题异步通信的定义 listview的异步加载 ajax的异步请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102846.html

React专题：可变状态

摘要：的参数既可以是一个对象，也可以是一个回调函数。回调函数提供了两个参数，第一个参数就是计算过的对象，即便这时还没有渲染，得到的依然是符合直觉的计算过的值。专题一览什么是可变状态不可变属性生命周期组件事件操作抽象本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验 Reac...

hosition 2019-08-26 12:17 评论0 收藏0
《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0
react基础学习记录一

摘要：虚拟的构建在组件渲染到网页前会执行一个这个函数必须和一起使用该函数在组件更新完后会自动执行，第三个参数是的返回值阶段发生在组件的删除前，会自动执行，我们常用于清除组件之前被添加的还会继续执行的东西。 react 学习记录自己学习，记录便于后面回顾基础知识点的记忆： state与props state是组件自己的数据，而props是父组件通过属性赋值方式将其传送给组件；这样达到了，...

URLOS 2019-08-26 12:24 评论0 收藏0
React setState 简单整理总结

摘要：区别在于传入一个更新函数，就可以访问当前状态值。后面两次会同步更新，分别输出，很显然，我们可以将次简单规成两类是一类中的又是一类，因为这两次在不同的调用栈中执行。写业务代码的时候需要经常用到setState, 前几天review代码的时候，又想了一下这个API，发现对它的了解不是很清楚，仅仅是 setState 是异步的, 周六在家参考了一些资料，简单整理了下，写的比较简单...

EdwardUp 2019-08-22 18:29 评论0 收藏0
React16 生命周期理解

摘要：完整生命周期初始化参数第一次渲染当父组件向子组件传入发生改变后，依次调用子组件更新渲染当组件自身发生变化后组件再次更新渲染当组件卸载生命周期详解此处请求接口数据子组件获得新时触发，作用是在子组件再次渲染前，更新子组件自身的，之后会触发接受的完整生命周期 constructor(props) // 初始化参数 componentWillMount() render() // 第一次...

Flands 2019-08-23 14:38 评论0 收藏0