详解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中的isNaN函数使用说明
Nov 10 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
javascript解析json实例详解
2014/11/05 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python返回数组的索引实例
2019/11/28 Python
python 动态绘制爱心的示例
2020/09/27 Python
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
往来会计岗位职责
2013/12/19 职场文书
促销活动方案模板
2014/02/24 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
出国签证在职证明
2014/09/20 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
签证工作证明模板
2015/06/15 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL