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 ...
随机推荐
- SpringMVC(十一) RequestMapping获取Cookie值
可以在控制器方法中使用类似@CookieValue("JSESSIONID") String sessionID的方式,来获取请求中的Cookie的值. 样例控制器代码 packa ...
- Bluestein's Algorithm
网上很少有人提到,写的也很简单,事实上就是很简单... \(Bluestein's\ Algorithm\),用以解决任意长度\(DFT\). 考虑\(DFT\)的形式:\[\begin{aligne ...
- 英语口语练习系列-C30-生日-年历的周日和月份-如果白昼落进
词汇-生日-birthday 生日庆祝 birthday celebration birth noun UK /bɜːθ/ US /bɝːθ/ the time when a baby or youn ...
- python基础一 ------"有序"的字典
"有序"字典:按照写入字典的先后顺序排序的字典(比list优点是按键查询) #-*-coding:utf-8 -*- #"有序"字典:按照写入字典的先后顺序排序 ...
- Django content-type 使用
1.models class PricePolicy(models.Model): """价格与有课程效期表""" content_type ...
- 上海交大ACM总教头俞勇讲述“最聪明人的故事”
这是一场世界大学生之间"最强大脑"的较量:这是拥有数十年历史的ACM国际大学生计算机程序设计大赛的赛场:斯坦福.加州理工.麻省理工.哈佛--当一个又一个在计算机科学领域拥有世界顶尖 ...
- React-Redux使用方法
React-Redux使用方法 理解 在React项目中使用react-redux,可以让你更方便的使用redux,原理是在index.js中注册app时用一个<Povider>标签嵌套, ...
- CallContext,ThreadStatic,AsyncLocal<T>,ThreadLocal<T>,学习笔记
1.CallContext 在当前调用上下文的线程数据槽里存储对象 2.ThreadStatic 是一个特性 3.AsyncLocal<T> 是一个类型,该字段应当为static,保证单例 ...
- Android 指定 Theme
在 application 标签中添加 android:theme="@android:style/Theme.Holo.Light.NoActionBar"
- .net 4.0 中的特性总结(四):Tuple类型
Tuple是具有指定数量和顺序的值的一种数据结构.针对这种数据结构,.Net4.0中提供了一组Tuple类型,具体如下: Tuple Tuple<T> Tuple<T1, T ...