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 相关文章推荐
javascript事件问题
Sep 05 Javascript
javascript hashtable实现代码
Oct 13 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 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
基于文本的搜索
2006/10/09 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript json2 使用方法
2010/03/16 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python 绘制国旗的示例
2020/09/27 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
工地门卫岗位职责范本
2014/07/01 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
python中sys模块的介绍与实例
2021/04/17 Python