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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
javascript截取字符串小结
Apr 28 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
vue实现登录功能
Dec 31 Vue.js
js数组的基本使用总结
Jan 18 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和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
总务岗位职责
2013/11/19 职场文书
留学自荐信写作方法
2014/01/27 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
自荐信大全
2019/03/21 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python