最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下。

今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正。

首先我先说说props。先看看官网是怎么介绍的:大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。比如说除了组件本身的一些属性外,今天我想说一下这个使用props来进行传递数据。

class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
上面这个组件,name我们就是通过这个props进行传递的,在Greeting页面中通过this.props.name来获取,注意这里的名称name一定要相同,否则会找不到,对于初学着来说,像我刚刚接触的时候,我是这样获取的,let name = this.props;注意,这样是会报undefind这个错误,
必须要这样才能获取到,let {name} = this.props;
props对于初学者来说,因为我是做android的,所以刚刚接触props我是将它理解为类似于android中的bundle,这样的一个包。 下面说一下这个state,先看看官网上是怎么说的:我们使用两种数据来控制一个组件:propsstateprops是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。这是官网的原话。我们知道这个组件是有生命周期的,但是有时候我们想改变某些数据,比如某时候对某些控件的隐藏与显示。
最直观的理解,你可以这样理解,状态,控件都是有状态的,我们通过状态的改变从而刷新整个页面。state值一单会有改变,系统就会刷新,从未实现数据的更新。

react native中对props和state的理解的更多相关文章

  1. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  2. react native中state和ref的使用

    react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...

  3. react native中props的使用

    react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. React Native中加载指示器组件ActivityIndicator使用方法

    这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...

  7. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  8. react native 中的ListView

    ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...

  9. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

随机推荐

  1. linux重定向

    常用FD有3个,为0(stdin,标准输入).1(stdout,标准输出).2(stderr,标准错误输出),默认与keyboard.monitor有关: cmd > file 把 stdout ...

  2. CIDR详解和ip最长地址前缀匹配

    1.CIDR是什么 无类域间路由(CIDR)编址方案 摒弃传统的基于类的地址分配方式,允许使用任意长度的地址前缀,有效提高地址空间的利用率. 就是一个ip加一个网络掩码,不过这个掩码不是之前只有3个值 ...

  3. MongoDB系列二

    简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.  MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql ...

  4. poj1006Biorhythms(同余定理)

    转自:http://blog.csdn.net/dongfengkuayue/article/details/6461298 本文转自head for better博客,版权归其所有,代码系本人自己编 ...

  5. angularjs自带过滤器

    filter: filter过滤器第一个参数若是对象: <ul> <li ng-repeat="friend in friends | filter:{'name':'Jo ...

  6. c#.Net:Excel导入/导出之NPOI 2.0简介

      NPOI 2.0+主要由SS, HPSF, DDF, HSSF, XWPF, XSSF, OpenXml4Net, OpenXmlFormats组成,具体列表如下: 资料来自:百度百科   Ass ...

  7. Navigation Bar options for Android (based on photosomething project)

    1, Tab控件即标签页,可以在一页中切换显示n页内容,要使用此效果,需要用到TabHost和Tabwidget类.(过时了?) Tab控件具有两种实现过程,一是在同一个Activity中切换显示不同 ...

  8. 什么叫哈希表(Hash Table)

    散列表(也叫哈希表),是根据关键码值直接进行访问的数据结构,也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函数叫做散列函数,存放记录的数组叫做散列表. - 数据结构 ...

  9. .htaccess 基础教程(三)RewriteCond标志符,RewriteRule适用的标志符

    1.利用 .htaccess 防止盗链 如果不喜欢别人在他们的网页上链接自己的图片.文档的话,也可以通过htaccess的指令来做到.当然这样也可以对你的网站服务器压力变小! 这次先给出‘代码’,然后 ...

  10. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...