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

// 错的,这样写不会重新渲染组件
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. SpringBoot整合dubbo

    Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成. 以上介绍来源于百度百科,具体dubbo相关可以自行查 ...

  2. 使用Actuator监控

    Actuator可能大家非常熟悉,它是springboot提供对应用自身监控,以及对应用系统配置查看等功能. springboot使用actuator的方式非常简单,只需要在项目中加入依赖spring ...

  3. AGC 030D.Inversion Sum(DP 期望)

    题目链接 \(Description\) 给定长为\(n\)的序列\(A_i\)和\(q\)次操作\((x,y)\).对于每次操作\((x,y)\),可以选择交换\(A_x,A_y\)两个数,也可以选 ...

  4. Min_25筛 学习笔记

    这儿只是一个简单说明/概括/总结. 原理见这: https://www.cnblogs.com/cjyyb/p/9185093.html https://www.cnblogs.com/zhoushu ...

  5. Python3之弹性力学——应力张量2

    问题 已知某应力张量的分量为 \[ \sigma_{11}=3,\quad\sigma_{12} = \sigma_{13} = 1, \quad \sigma_{22} = \sigma_{33} ...

  6. 单片机软件proteus的汉化步骤

    整体思想:把汉化包里的文件替换软件的英文的软件 右键打开文件安装的位置,找到Translations文件夹,打开它等待被替换. 打开这个找到Translations文件夹,把下面的文件全部复制替换上面 ...

  7. [HNOI2018]寻宝游戏

    Description: 给出\(n\)个长为\(m\)的01串,第0个为0,同时给出\(q\)个询问串,每次向其中添加\(n\)个\(\&\)或\(|\)符号,求使这些串按顺序运算得到询问串 ...

  8. js怎么删数组固定的值

    <script type="text/javascript"> Array.prototype.indexOf = function(val) { for (var i ...

  9. java内存和linux关系

    运行个JAVA 用sleep去hold住 package org.hjb.test; public class TestOnly { public static void main(String[] ...

  10. GMA Round 1 年货

    传送门 年货 三角形的年货有没有见过啊?(如下图所示,图中共有12层小三角形,共计144个) 啊,不,这不是真正的年货,真正的年货是正六边形的!(这是什么设定?) 总之,麻烦你在图中找出顶点在三角形格 ...