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

// 错的,这样写不会重新渲染组件
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. js日期处理函数 -- 判断闰年,获取当月的总天数、添加月份

    1. 判断是否是闰年 function isLeapYear(eDate) { var year = eDate.getFullYear(); return (((0 == year % 4) &am ...

  2. python数据结构之插入排序

    插入排序(英语:Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,在从后向前扫描 ...

  3. shell脚本中的set -e和set -o pipefail

    工作中经常在shell脚本中看到set的这两个用法,但就像生活中的很多事情,习惯导致忽视,直到出现问题才引起关注. 1. set -eset命令的-e参数,linux自带的说明如下:"Exi ...

  4. React-Native + Genymotion android开发环境搭建

    1.解压android-sdk_r24.3.4-windows.zip放到一个空间大的开发盘中 2.添加环境变量,路径时 ANDROID_HOME D:\Android\android-sdk-win ...

  5. mongo库的相关操作经验

    操作mongo相关经验: 1.创建数据库用户名: db.createUser( { user: "bianque", pwd: "123456", roles: ...

  6. mac上生成目录结构

    brew又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件. 一.安装brew ruby -e "$(curl -fsSL https://ra ...

  7. VeeamBackup9.5安装与配置

    产品介绍 Veeam是一家第三方的虚拟化数据中心备份及恢复公司,主要软件为Veeam Availability Suite,包括Veeam Backup & Replication和Veeam ...

  8. System.ServiceModel.AddressAccessDeniedException

    发生了 System.ServiceModel.AddressAccessDeniedException   HResult=0x80131501   Message=HTTP 无法注册 URL ht ...

  9. 双向BFS—>NOIP2002 字串变换

    如果目标也已知的话,用双向BFS能很大提高速度 单向时,是 b^len的扩展. 双向的话,2*b^(len/2)  快了很多,特别是分支因子b较大时 至于实现上,网上有些做法是用两个队列,交替节点搜索 ...

  10. VS2013配置OPENCV2.4.9

    转载自->这里 设置opencv SDK解压目录,点击Extract后解压 我是习惯于解压到这个位置的. 解压过程如上图. 2.         文件目录介绍 解压后会在目录下生成opencv的 ...