一：Props(属性)

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变

通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Greeting extends Component {  render() {    return (      
     
      Hello {this.props.name}!
         );  }}class LotsOfGreetings extends Component {  render() {    return (      
             
              
              
            
         );  }}AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

二：State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Blink extends Component {  constructor(props) {    super(props);    this.state = { showText: true };    // 每1000毫秒对showText状态做一次取反操作    setInterval(() => {      this.setState({ showText: !this.state.showText });    }, 1000);  }  render() {    // 根据当前showText的值决定是否显示text内容    let display = this.state.showText ? this.props.text : ' ';    return (      
     
      {display}
         );  }}class BlinkApp extends Component {  render() {    return (      
             
              
              
              
            
         );  }}AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

实例2:

import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native';class PizzaTranslator extends Component {  constructor(props) {    super(props);    this.state = {text: ''};  }  render() {    return (      
             
      
        this.setState({text})}        />        
       
                  {this.state.text.split(' ').map((word) => word && '?').join(' ')}        
             
      
         );  }}

上面这段代码就可以实现在输入框不停输入内容后，修改state里面的text内容，而且当调用setState时会刷新UI，而用组件Text 可以获得state里面text属性的值；方法constructor是构造方法，根据参数都要实现super;

注意：箭头函数知识点

ES6允许使用“箭头”（=>）定义函数。立即执行函数可以写成箭头函数的形式

// 箭头函数的例子()=>1v=>v+1(a,b)=>a+b()=>{    alert("foo");}e=>{    if (e == 0){        return 0;    }    return 1000/e;}

var f = v => v;上面的箭头函数等同于：var f = function(v) {  return v;};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;// 等同于var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) {  return num1 + num2;};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

其它相关内容可以见；

 

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；