React Native從零開始（三）Props（屬性）和State（狀態）

React Native從零開始（三）Props（屬性）和State（狀態）

一、Props（屬性）

props是組件自身的屬性，一般用於嵌套的內外層組件中，負責傳遞信息（通常由父層組件向子層組件傳遞）
注意：props對象中的屬性與組件的屬性一一對應，不要直接去修改props中屬性的值

因爲官網上已經有了他的基本使用方法，但是可能還是不能夠很好的理解Props屬性，那麼可以看一看下面的使用示例。

1、父組件向子組件參數的傳遞

首先創建兩個自定義的組件ChildName和ChildTel

class ChildName extends Component{
    render(){
        return(
            <Text>{this.props.name}</Text>
        );
    }
}
class ChildTel extends Component{
    render(){
        return(
            <Text>{this.props.tel}</Text>
        );
    }
}

這裏的{this.props.tel},{this.props.name},是這兩個子控件的屬性。然後我們創建一個父組件包含這兩個子組件，然後利用這個父組件像子組件傳遞數據

class Child extends Component{
    render(){
        return(
            <View>
                <ChildName name={this.props.ChildName}/>
                <ChildTel tel={this.props.ChildTel}/>
            </View>
        );
    }
}

這裏的name和tel是子組件的屬性，然後我們用父組件的屬性傳遞給子組件，那麼父組件的屬性就是ChildName和ChildTel。也就是說我們設置父組件的屬性時那麼他的子組件props屬性也會被賦值。

 return (
            <Child
                ChildName="小明"
                ChildTel="18912345678"/>
        );

最後的效果如下：

2、...this.props的使用

是props提供的語法糖，可以將父組件的全部屬性複製給子組件，也就是說我們不需要爲子組件設置屬性，利用這個將會把父組件的屬性賦予給子組件

   PersonClick (){
        alert("點擊效果");
    }
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Person
                name="小明"
                tel="18912345678"
                onPress={this.PersonClick}/>
        );
    }

這個時候我們看到父組件有一個函數是alert輸出個字符串，如果我們不使用...this.props那麼點擊控件，不會有點擊效果

    render(){
        return(
            <Text >{this.props.name}</Text>
        );
    }

那麼我們加上這句話再來點擊可以有點擊效果

    render(){
        return(
            <Text {...this.props}>{this.props.name}</Text>
        );
    }

3.this.props.childer

childer是一個例外不是跟組件的屬性對應的。表示組件的所有子節點。

因爲列表或者控件中的子控件數目，不確定，所以我們需要遍歷children，逐項進行設置，使用React.Childer.map方法

返回值：數組對象。

子控件

render(){
        return(
           <View>
               {
                   React.Children.map(this.props.children,function (child) {
                       return (
                           <View>{child}</View>
                       );
                   })
               }
           </View>
        );
    }

父控件

    render() {
        return (
            <Person>
                <Text>小明</Text>
                <Text>18812345678</Text>
                <Text>12歲</Text>
            </Person>
        );
    }

4、設置組件屬性的默認值

就是組件在不設置屬性的值的時候爲其設置一個默認的值ES6語法下的

   render() {
        return (
            <Person/>
        );
    }

子控件

   static defaultProps={
        name:'xxxx',
    };
    render(){
        return(
            <Text>{this.props.name}</Text>
        );
    }

這個時候的顯示效果是

二、State（狀態）

我們使用兩種數據來控制一個組件：props和state。props是在父組件中指定，而且一經指定，在被指定的組件的生命週期中則不再改變。 對於需要改變的數據，我們需要使用state。

一般來說，你需要在constructor中初始化state（譯註：這是ES6的寫法，早期的很多ES5的例子使用的是getInitialState方法來初始化state，這一做法會逐漸被淘汰），然後在需要修改時調用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 };

    // 每1000毫秒對showText狀態做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根據當前showText的值決定是否顯示text內容
    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);

效果如下