深入掌握 react的 setState的工作机制


Posted in Javascript onSeptember 27, 2017

react 是单向数据流,若想要改变已有组件的外观,我们只能通过更改组件的 props 或者更新组件的 state。在 react 项目的代码中我们操作最多的就是 this.setState 方法。下面对 setState 方法进行详细的说明。

<!--more -->

setState要点:react 框架为了提高性能,会对 state 的更新进行收集、合并、再进行一次批量的状态更新。这种机制常常导致一些意想不到的情况。

setState 有两种调用形式:

向 setState 传递对象
setState()并不会立即触发 state 的更新。

//this.state.demo = 1;
handleClick = () => {
  this.setState({demo: 2});
  console.log(this.state.demo);// 1
}

1、?注意:在 addEventListener、setTimeout、ajax 回调中 this.setState 是立即触发的。

2、setState 会合并更新,可能会造成状态更新的丢失

handleClick = () => {
  this.setState({demo: this.state.demo + 1});
  this.setState({demo: this.state.demo + 1});
}
//click 之后 demo 为2而不是3

综上:在同一代码块中不要多次调用 this.setState 方法

react 的 setState 还提供了另一种调用形式: this.setState(callbackFunc)

this.setState((previousState, currentProps) => {
  return { ...previousState, foo: currentProps.bar };
});

该语法和直接为 setState 传递对象不同,不会合并更新。

// demo + 1
handleSyncStateChange = () => {
  this.setState({
    demo: this.state.demo + 1
  });
  this.setState({
    demo: this.state.demo + 1
  });

}
// demo + 2
handleAsyncStateChange = () => {
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
}

refs

Async Nature Of setState

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

Javascript 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
javascript 作用于作用域链的详解
Sep 27 #Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 #Javascript
You might like
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python中的变量和作用域详解
2016/07/13 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python写一个md5解密器示例
2018/02/23 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
家长会欢迎词
2015/01/23 职场文书
暑假安全保证书
2015/02/28 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
PHP设计模式(观察者模式)
2021/07/07 PHP
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers