详解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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
JS代码实现table数据分页效果
May 26 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue-cli中安装方法(图文详细步骤)
Dec 12 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
德生1994机评
2021/03/02 无线电
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
JavaScript代码复用模式实例分析
2012/12/02 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python程序控制NAO机器人行走
2019/04/29 Python
使用python接入微信聊天机器人
2020/03/31 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python统计文章中单词出现次数实例
2020/02/27 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
万年牢教学反思
2014/02/15 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
爱护公物主题班会
2015/08/17 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS