异步setState

很多时候我们在执行setState之后再执行某些方法,如果单纯把该方法放到setState函数之后,你可能会很惊奇的发现该方法在setState执行结束前已经执行了。


点击按钮后执行的结果为:first 1    second 2


从上面的程序已经可以发现setState()方法是异步的,console.log('first', this.state.number)在setState执行结束前已经执行了,添加定时器让我们的代码在setState之后执行并不是一个好的主意,我们并不知道setState方法什么时候执行结束。

在React官方的API中setState给出这样的描述:setState(object nextState[, function callback])。第一个参数是需要改变的状态,第二可选参数是一个回调函数,该函数在 setState 执行完毕并且组件重新渲染完成之后调用。

我们想在setState方法执行后执行我们的代码,不妨把我们的代码放到setState的回调函数。上述代码可修改为:


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

推荐阅读更多精彩内容

  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 12,038评论 5 22
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 7,634评论 0 5
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 8,629评论 0 19
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,455评论 0 4
  • 猜测了这么久,魅族8.10E系列神秘面纱终于被SNH48揭开了一点点,但许多网友却表示了抗议,因为只在视频中看到了...
    台手进财阅读 1,885评论 11 0