深入掌握 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优化技巧(文件瘦身篇)
Jan 28 Javascript
jquery 选择器部分整理
Oct 28 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 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
PHP 编程安全性小结
2010/01/08 PHP
Yii框架登录流程分析
2014/12/03 PHP
php常用的工具开发整理
2019/09/26 PHP
xmlHTTP实例
2006/10/24 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
pandas对指定列进行填充的方法
2018/04/11 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Python中的面向接口编程示例详解
2021/01/17 Python
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
分布式数据库需要考虑哪些问题
2013/12/08 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
工作过失检讨书
2014/02/23 职场文书
大学学习计划书范文
2014/05/02 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
写字楼租赁意向书
2014/07/30 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
工地材料员岗位职责
2015/04/11 职场文书
推广普通话的宣传语
2015/07/13 职场文书