react学习笔记之state以及setState的使用


Posted in Javascript onDecember 07, 2017

在react中通过 state 以及 setState() 来控制组件的状态。

state

state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data。

1.state的作用

state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.

React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.

2.state工作原理

常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的

callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.

setState()

与 vue 中不同的是 state 不能直接被修改,需要通过 setState() 的方法去修改。

1、setState() 更新组件状态之后不会立即生效,react 为提高性能会按批次更新 state 然后 render, 即异步操作,所以 setSate() 之后立即去取state的值并不是更新之后的状态。

2、setState() 第一个参数接受两种类型的参数,Object以及Function

Object

this.setState({
 msg: '更新state msg'
})

当参数是Object的时候, 可以即为对应 state 中的 key, value 即是新的值。

Function

当参数是函数的时候, setState() 会将上一个 setState() 的结果作为参数传入这个函数

...
constructor () {
 this.state = { counter: 0 }
}
add() {
 this.setState({ counter: this.state.counter + 1 })
 this.setState({ counter: this.state.counter + 1 }) // 此时`this.state.counter`的值还是初始值0,,所以这个操作是无效的
 this.setState(prevState => { counter: prevState.counter + 1 }) // `prevState.counter` 为上次更新之后的值,即是1
}
...

setState() 第二个参数是一个回调函数,表示 state 更新完成

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

根据这个可以使用Promise以及async/await,封装成同步操作

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

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

Javascript 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
js创建元素(节点)示例
Jan 02 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
有关Promises异步问题详解
Nov 13 Javascript
Augularjs-起步详解
Jul 08 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
React Native 截屏组件的示例代码
Dec 06 #Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
mui back 返回刷新页面的实例
Dec 06 #Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 #Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
JS实现登录页密码的显示和隐藏功能
Dec 06 #Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
详解python3中zipfile模块用法
2018/06/18 Python
python开头的coding设置方法
2019/08/08 Python
Python @property及getter setter原理详解
2020/03/31 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
学雷锋活动简报
2015/07/20 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript