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上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
bootstrap table实例详解
Jan 06 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
ES6 十大特性简介
Dec 09 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
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
告诉大家什么是JSON
2008/06/10 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python处理session的方法整理
2019/08/29 Python
Europcar比利时:租车
2019/08/26 全球购物
P/Invoke是什么
2015/07/31 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
高一军训的心得体会
2014/09/01 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技