详解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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
Cookie 小记
Apr 01 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
AngularJS中的模块详解
Jan 29 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
详解Vue打包优化之code spliting
Apr 09 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
thinkPHP交易详情查询功能详解
2016/12/02 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
网站美工岗位职责
2014/04/02 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
学生吸烟检讨书
2014/09/14 职场文书
小学四年级学生评语
2014/12/26 职场文书
如何写新闻稿
2015/07/18 职场文书
婚宴父母致辞
2015/07/27 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL