深入掌握 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对象及属性
Feb 13 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
jquery实现图片切换代码
Oct 13 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
json字符串传到前台input的方法
Aug 06 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
curl和libcurl的区别简介
2015/07/01 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
JS随机排序数组实现方法分析
2017/10/11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python实现一个优先级队列的方法
2020/07/31 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python解包用法详解
2021/02/17 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
办公室主任先进事迹
2014/01/18 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
企业贷款委托书格式
2014/09/12 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
追讨欠款律师函
2015/06/24 职场文书