[React-Native]Props和State

一、Props（自定义参数）

大多数组件可以在创建时使用不同的参数进行自定义。 这些创建参数称为Props。
（1）例如，一个基本的React Native组件是Image。 当您创建图像时，可以使用道具命名源来控制其显示的图像。

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

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}}/>
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

解释：{pic}被大括号括起来，以将变量pic嵌入到JSX中。 你可以把任何JavaScript表达式放在大括号内JSX。

（2）你自己的组件也可以使用Props。 这样，您可以在应用程序的许多不同位置创建单个组件，每个位置的属性略有不同。 只需在render函数中引用this.props。举个例子：

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

解释：此示例在JSX中使用Greeting组件，就像内置组件一样，View里面三个自定义控件Greeting除了内容不一样其他都一样，这时就可以在自定义控件里面使用props属性。

另一个新的东西在这里是视图组件。 视图可用作其他组件的容器，以帮助控制样式和布局。

使用props和基本的文本，图像和视图组件，您可以构建各种各样的静态界面。 要了解如何使您的应用随时间变化，您需要了解下面一个知识点状态。

二、State

props和state作为两种数据相关的组建。 props由父节点设置，它们在组件的整个生命周期中都是固定的。 对于要改变的数据，我们必须使用状态。

一般来说，在构造函数中初始化状态，然后当你想改变它时调用setState。

例如，假设我们想让文本一直闪烁。

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

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>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

本身三个文本就用到props组件，每一个文本又有显示和隐藏属性，就用到state组件。