react学习笔记2之正确使用状态
//状态不要直接修改,比如: // 错的,这样写不会重新渲染组件
this.state.comment = 'Hello'; //修改状态正确的方式
this.setState({comment:'Hello'}); setState方法的参数可以接受一个对象,也可以接受一个回调函数,状态的修改可能是异步的,所以当你修改的状态需要依赖状态本身或者props的值的时候,不要用上面的方式,而是传递一个方法,比如: //假如组件有这样一个状态 this.state = {count:0};
this.setState((prevState,props) =>({count:prevState.count + props.num})) //当setState的参数是回调函数的时候,它接受两个参数,第一个是组件的上一个状态对象,第二个是组件的props对象 //组件可以将状态作为属性传递给子组件
<Demo message={this.state.comment} /> //状态只能定义在construtor构造函数里面
react学习笔记2之正确使用状态的更多相关文章
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
随机推荐
- Java使用序列化的私有方法巧妙解决部分属性持久化问题
部分属性持久化问题看似很简单,只要把不需要的持久化的属性加上瞬态关键字(transient关键字)即可,没错,这也是一种解决方案,但在有的时候行不通,例如在一个计税系统和人力系统对接的时候,计税系统需 ...
- iOS app启动流程
最近看了些Runtime Runloop的一些知识.边看边摸索.看到群里有人在问 一些面试题.其中就提到了app的启动流程. 所以这里也研究小结一下,以供自己学习备用. 1.项目要运行,就要有入口. ...
- 如何基于asp.net core的Identity框架在mysql上作身份验证处理
首先了解这个概念,我一开始也是理解和掌握基本的概念,再去做程序的开发.Identity框架是微软自己提供,基于.net core平台,可拓展.轻量 级.面向多个数据库的身份验证框架.IdentityS ...
- 译:为什么使用 NoSQL 数据库
原文链接:Why NoSQL Database? 向数据时代的转变正在推动 NoSQL 随着各行各业朝着数据时代转变,商业世界正在经历巨大的变革.这是由互联网以及其他二十一世纪新技术--云计算.移动应 ...
- JS 对象引用问题
var a = {n:1}; var b = a; a = {n:2}; a.x = a ;console.log(a.x);console.log(b.x); var a = {n:1}; var ...
- (数据存储)Android系统存储数据
移动设备需要存储数据,处理数据并输出处理后的信息. 主题一:存储键值对 If you have a relatively small collection of key-values that you ...
- [PA2014]Lustra
[PA2014]Lustra 题目大意: 有n个工厂参加竞标.每个工厂能生产长度在\([a_i,b_i]\)之间,宽度在\([c_i,d_i]\)之间的镜子,镜子不可以旋转. 问是否有某个工厂能生产出 ...
- linux重新设置密码,亲试成功
1:进入/etc/my.cnf 在[mysqld]下添加一行skip-grant-tables 2:保存配置文件后,输入whereis systemctl(提示redirecting to 某个目录下 ...
- pngcrush caught libpng error原因及解决方法
报错信息: While reading /Users/zhangyanfeng/Desktop/程序/KeyBoardDemo/KeyBoardDemo/keyboard/KerboardResour ...
- 前端里面如何进行搜索引擎优化(SEO)
如何进行SEO优化: (1) 避免head标签js堵塞: 所有放在head标签里面的js和css都会堵塞渲染:如果这些css和js需要加载很久的话,那么页面就空白了: 解决办法:一是把script放到 ...