//状态不要直接修改,比如:

// 错的,这样写不会重新渲染组件
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之正确使用状态的更多相关文章

  1. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  2. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  3. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  4. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  6. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

随机推荐

  1. 一种表达式语言的解析引擎JEXL简单使用

    Jexl 是一个 Expression Language 的解析引擎, 是为了方便嵌入你的系统或者程序框架的开发中, 他算是实现了 JSTL 中 EL 的延伸版本. 不过也采用了一些 Velocity ...

  2. String,StringBuffer与StringBuilder的区别|线程安全与线程不安全

    https://www.cnblogs.com/xingzc/p/6277581.html

  3. Android图片缓存框架Glide

    Android图片缓存框架Glide Glide是Google提供的一个组件.它具有获取.解码和展示视频剧照.图片.动画等功能.它提供了灵活的API,帮助开发者将Glide应用在几乎任何网络协议栈中. ...

  4. vue动态切换页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [CF1131F] Asya And Kittens

    Description: 给定n个点的序列,一开始有n个块,每次将两个块合并,并告诉你这两个块中的一对元素,求一种可能的原序列 Hint: \(n \le 1.5*10^5\) Solution: 实 ...

  6. 用canvas整个打飞机游戏

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我 ...

  7. BZOJ4133 : Answer的排队

    设$f[i][j]$表示考虑前$i$个人,第$i$个人在前$i$个人中排名为$j$的方案数. 对于大小关系相同的一段,转移可以看成求$k$次前/后缀和,任意一项对另一项的贡献仅和其下标差值有关,FFT ...

  8. javaweb笔记

    (1)web项目需复制web.xml文件 (2)需要复制classes文件 需要把bin里面的com----复制到classes中

  9. Java 服务端监控方案(四. Java 篇)

    http://jerrypeng.me/2014/08/08/server-side-java-monitoring-java/ 这个漫长的系列文章今天要迎来最后一篇了,也是真正与 Java 有关的部 ...

  10. Vue(十一)计算属性

    计算属性 1. 基本用法 计算属性也是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作 b.对计算属性中的数据进行监视 2.计算属性 vs 方法 将计算属性的get函数定义为一个方法也 ...