React学习：状态(State) 和 属性(Props)

简介

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

props（属性）。

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的属性(prop)来指定要显示的图片的地址，以及使用名为style的属性(prop)来控制其尺寸。

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
当然你也可以写成这样

import React, { Component } from 'react';
import {
  Image
} from 'react-native';

export default class Bananas extends Component {
    render() {
        return (
            <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={{width: 193, height: 110}} />
        );
    }
}

Image组件用于显示图片;
source属性指定显示图片的地址，有两种指定形式：
 指定本机文件：source={require('./icon.png')}，，相对位置寻址
  注：： 如果你有my-icon.ios.png和my-icon.android.png，Packager就会根据平台而选择不同的文件。
 指定网络图片：source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
  注：： 一般需要手动指定图片的尺寸 style={{widtn:193,height:110}}
下面是指定本机文件的写法

import React, { Component } from 'react';
import{ Image, View } from 'react-native'

export default class APP extends Component {
    render() {
        return(
            <View>
                <Image source={require('./img/guide.png')} />
            </View>
        );
    }
}

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。
下面的例子把Greeting组件写在JSX语句中，用法和内置组件并无二致，我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

//在组件中，获取属性的方法如下代码：
class Greeting extends Component {
//每一个组件中必须有一个render方法，用于输出组件
    render() {
//使用return来返回要输出的内容
        return (
            <Text>Hello {this.props.name}!</Text>
        );
    }
}

//定义属性：
export default class App extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Greeting name='zhang' />
                <Greeting name='wang' />
                <Greeting name='zhao' />
            </View>
        );
    }
}

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如<Greeting name="wang">，就是Greeting组件加入一个name属性，值为wang。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。

State（状态）

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

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

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

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {
    //constructor 构造函数
    constructor(props) {
        super(props);  //执行父类的方法
        this.state = { showText: true };

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);
    }

    render() {
        // 根据当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.text : ' ';
        return (
            <Text>{display}</Text>
        );
    }
}

export default class BlinkApp extends Component {
    render() {
        return (
            <View>
                <Blink text='I love to blink' />
                <Blink text='Yes blinking is so great' />
                <Blink text='Why did they ever take this out of HTML' />
                <Blink text='Look at me look at me look at me' />
            </View>
        );
    }
}

constructor

我觉得在这里有必要介绍一下constructor属性，当你在React class中需要设置state的初始值或者绑定事件时，需要加上constructor(){}
我们知道，在JavaScript中，constructor返回对创建此对象的数组函数的引用。
例程如下，前者输出内容，后着输出整个 constructor构造函数

<script type="text/javascript">

var test=new Array();

if (test.constructor==Array)
{
document.write("This is an Array");
}

if (test.constructor==Date)
{
document.write("This is a Date");
}

</script>

输出结果：This is an Array

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor);

</script>
输出结果：function employee(name,job,born) { this.name=name; this.job=job; this.born=born; }

而在react-native中，用法是稍微有些区别的
onstructor方法中出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象，子类必须在constructor方法中调用super方法，否则新建实例时会报错，因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

取反操作

// 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);

这里其实就是将this.state的值作为一个参数previousState传了进去，previousState.showText跟this.state.showText是等价的；然后要通过return方法把值返回给state，不然这个showText只是作为形参，不对外面的state产生影响。在这里previousState只起到中转作用，你可以把它改为任意值，不影响效果，就像下面这样

this.setState(aa => {
                return { showText: !aa.showText };
            });

当然如果觉得不好理解的话，也可以直接用下面这种写法
this.setState({showText: !this.state.showText});

State的工作原理和React.js完全一致，所以对于处理state的一些更深入的细节，你可以参阅React.Component API。不过上面那个英文版的看着不方便，如果想学习更多关于react的知识的话，所以强烈推荐极客学院的中文版本