React Native知識11-Props(屬性)與State(狀態)

一：Props(屬性)

大多數組件在建立時就可使用各類參數來進行定製。用於定製的這些參數就稱爲props（屬性）。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);

二：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 (
      <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);

實例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 (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

上面這段代碼就能夠實如今輸入框不停輸入內容後，修改state裏面的text內容，並且當調用setState時會刷新UI，而用組件Text 能夠得到state裏面text屬性的值；方法constructor是構造方法，根據參數都要實現super;

注意：箭頭函數知識點

ES6容許使用「箭頭」（=>）定義函數。當即執行函數能夠寫成箭頭函數的形式

// 箭頭函數的例子
()=>1
v=>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; }

因爲大括號被解釋爲代碼塊，因此若是箭頭函數直接返回一個對象，必須在對象外面加上括號。

其它相關內容能夠見ES裏面的文章介紹；

 

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，天天都會更新一些深度內容，在這裏若是你感興趣也能夠關注一下(嘿對美女跟知識感興趣)，固然能夠關注後輸入：github 會有個人微信號，若是有問題你也能夠在那找到我；固然不感興趣無視此信息；