react native中对props和state的理解
最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下。
今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正。
首先我先说说props。先看看官网是怎么介绍的:大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props
(属性)。比如说除了组件本身的一些属性外,今天我想说一下这个使用props来进行传递数据。
class LotsOfGreetings extends Component {
上面这个组件,name我们就是通过这个props进行传递的,在Greeting页面中通过this.props.name来获取,注意这里的名称name一定要相同,否则会找不到,对于初学着来说,像我刚刚接触的时候,我是这样获取的,let name = this.props;注意,这样是会报undefind这个错误,
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
必须要这样才能获取到,let {name} = this.props;
props对于初学者来说,因为我是做android的,所以刚刚接触props我是将它理解为类似于android中的bundle,这样的一个包。 下面说一下这个state,先看看官网上是怎么说的:我们使用两种数据来控制一个组件:props
和state
。props
是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state
。这是官网的原话。我们知道这个组件是有生命周期的,但是有时候我们想改变某些数据,比如某时候对某些控件的隐藏与显示。
最直观的理解,你可以这样理解,状态,控件都是有状态的,我们通过状态的改变从而刷新整个页面。state值一单会有改变,系统就会刷新,从未实现数据的更新。
react native中对props和state的理解的更多相关文章
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- react native中state和ref的使用
react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...
- react native中props的使用
react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native中加载指示器组件ActivityIndicator使用方法
这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- react native 中的ListView
ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
随机推荐
- redis之理解
http://www.cnblogs.com/stephen-liu74/category/354125.html
- BZOJ3489: A simple rmq problem
设$i$的前驱为$p_i$,后继为$q_i$,把询问看成点$(L,R)$,有贡献的$i$满足$L\in(p_i,i]$且$R\in[i,q_i)$,询问的就是覆盖这个点的矩形的最大值.那么可以用可持久 ...
- [转载]用 grub2 启动 clover.iso 来启动 OS X
这个帖子只用来解决特定问题,是楼主这两天辛苦的结晶,如果你遇到了跟我差不多的情形,你就可以尝试这个解决方案. 特定情景:1.不管你的机器支不支持 UEFI ,反正你现在是用传统 BISO + MBR ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- Java的发展历程
Java的发展历程充满了传奇色彩. 最初,Java是由Sun公司的一个研究小组开发出来的, 该小组起先的目标是想用软件实现对家用电器进行集成控制的小型控制装置. 开始,准备采用C++,但C++太复杂, ...
- 浅谈ARP协议以及应用
0. 前言 本章主要简单的介绍ARP的协议格式,主机如何发送和处理ARP报文,以及免费ARP. 1. ARP协议原理 ARP,全称Address Resolution Protocol,地址解析协议, ...
- maven install Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-war) on project web_nanchang
maven打包成war时,报错:Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default- ...
- B:Wordpress不同分类调用不同的模板
这里指的是默认文章类型的模板(single.php,category.php) 应用场景: 默认文章默认有2个大类(新闻资讯.游戏资料) 新闻资讯下的所有子分类调用"新闻资讯列表模板,新闻内 ...
- VS2013中, 无法嵌入互操作类型“……”,请改用适用的接口的解决方法
使用VS2013,在引用COM组件的时候,出现了无法嵌入互操作类型“……”,请改用适用的接口的错误提示. 查阅资料,找到解决方案,记录如下: 选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作 ...
- Java 判断整数方法
今天写代码的时候突然想到要怎么来判断整数,然后通过判断是否是整数来处理相关的操作.开始想到了几个方法,比如百度到的 x(int) instanceof Integer,但是这样的话程序会报错,还有一个 ...