深入掌握 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 相关文章推荐
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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模板类代码
2008/09/07 PHP
PHP学习之整理字符串
2011/04/17 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
利用Python实现kNN算法的代码
2019/08/16 Python
如何写python的配置文件
2020/06/07 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
岗位职责范本
2013/11/23 职场文书
农村改厕实施方案
2014/03/22 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
植树节活动总结
2014/04/30 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
python四种出行路线规划的实现
2021/06/23 Python
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers