详解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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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开源建站平台小结
2010/04/22 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python破解同事的压缩包密码
2020/10/14 Python
利用python绘制正态分布曲线
2021/01/04 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
工厂见习报告范文
2014/10/31 职场文书
2014年教师工作总结
2014/11/10 职场文书
余世维讲座观后感
2015/06/11 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书