详解React中setState回调函数


Posted in Javascript onJune 14, 2018

在使用React过程中,中可以使用this.state来访问需要的某些状态,但是需要更新或者修改state时,一般而言,我们都会使用setState()函数,从而达到更新state的目的,setState()函数执行会触发页面重新渲染UI。但是!!!setState是异步的!!!

1. 语法:

setState(updater[, callback]) //

updater是要改变的state对象,callback是state导致的页面重新渲染的回调,等价于componentDidUpdate
一般而言,在设置页面某些state的时候,需要先设置好state,然后再对页面的一些参数进行修改的时候,可以使用setState的回调函数。

2. 分析一下区别

不在回调中使用参数,我们在设置state后立即使用state:

this.state = {foo: 1};
this.setState({foo: 123});
console.log(this.state.foo);
// 1

在回调中调用设置好的state

this.state = {foo: 2};
this.setState({foo: 123}, ()=> {
 console.log(foo);
 // 123
});

关于setState的回调函数的作用大概如此,这个函数相当于componentDidUpdate函数,和生命周期的函数类似。

3. 注意:

  1. 刚说了,setState是异步的!不保证数据的同步。
  2. setState更新状态时可能会导致页面不必要的重新渲染,影响加载。
  3. setState管理大量组件状态也许会导致不必要的生命周期函数钩子调用。

参考文档:https://facebook.github.io/react/docs/react-component.html#setstate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 #Javascript
Vue.js添加组件操作示例
Jun 13 #Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 #Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 #Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 #Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 #Javascript
详解webpack运行Babel教程
Jun 13 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python使用tornado实现登录和登出
2018/07/28 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
大三学生英语考试作弊检讨书
2015/01/01 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android