React Native - (二) Props屬性和State狀態

本文CSDN地址

本文有道地址

上一篇 React Native - (一) 瞭解文件結構

下一篇 React Native - (三) 樣式

Props(屬性)

---

Props官方解釋: 大多數組件在創建的時候可以使用各種參數來進行定製，用於定製的這些參數就是 Props(Properties屬性)

以常見的組件 image 爲例，在創建一個圖片時，可以傳入一個名爲 source 的 prop 來指定要顯示的圖片的地址，以及使用名爲 style 的prop來控制尺寸。

也就是說，組件 image 有兩個屬性 source 和 style:

• source: 指定要顯示圖片的地址
• style: 來控制組件的尺寸

//定義一個名爲 `Bananas` 組件
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}} />
    );
  }
}

譯註：圖片可能不會顯示:iOS9引入了新特性App Transport Security (ATS)。參見這篇說明修改。

請注意 {pic} 外圍有一層括號，我們需要用括號來把 pic 這個變量嵌入 JSX 語句中。

{} 的意思是 {} 內部爲一個 js 變量或者表達式，需要執行後取值。

因此 我們可以把任意合法的 JavaScript 表達式通過 {}嵌入到 JSX語句中。

自定義的組件也可以使用 props。

通過在不同的場景使用不同的屬性定製，可以儘量提高自定義組件的複用範疇。

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

Greeting 相當於 Text 的進一步封裝。

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          123123
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        //1//2
        <Greeting name="jerry" />
      </View>
    );
  }
}

1. 創建 Greeting 組件
2. 添加屬性 name 並制定值爲 jerry

瞭解基礎 Component 和文件結構，使用 props 和基礎的 Text、Image 以及 View，你就已經足以編寫各式各樣的 UI 組件了。是不是很簡單？哈哈~

State(狀態)

---

我們使用兩種數據來控制一個組件: props 和 state。

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

一般來說, 你需要在 constructor 中初始化 state，然後在需要修改時調用 setState方法。

假如我們需要製作一段不停閃爍的文字。文字內容本身在組件創建時就已經制定好了，所以文字內容應該是一個 prop。而文字的顯示或隱藏的狀態(快速的顯隱切換就產生了閃爍的效果)則是隨着時間變化的，因此這一狀態應該寫到 state中。

export default class App extends Component<{}> {
  render() {
    return (
      /* 4. 實例代碼(四) */
      <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>
    );
  }
}

class Blink extends Component {
    // 構造函數
    constructor(props){
      super(props);
      this.state = {showText: true};

      setInterval(() => {

        this.setState( previousState => {
            return {showText : !previousState.showText};
          });
      }, 1000);
    }
    render(){
      let disdlay = this.state.showText ? this.props.text : '';
      return (
        <Text>{disdlay}</Text>
      );
    }
}

上述代碼是對 state 的初步使用，值得注意的是

React ES6 class constructor super()

1. 在 constructor 裏面調用 super 是否是必要的？
2. super 與 super(props) 的區別？

其實前面就有說到

一般來說, 你需要在 constructor 中初始化 state，然後在需要修改時調用 setState方法。

解答一:

僅當存在 constructor 的時候必須調用 super，如果沒有，則不用

如果在你聲明的組件中存在 constructor，則必須要加super。

class MyClass extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()
    }
}

如果在你的代碼中存在 consturctor，那你必須調用：之所以會報錯，是因爲若不執行supe，則 this 無法初始化。

小結：

Blink 組件擴展自 Component， 我們可以理解爲 Blink 繼承自 Component。Component 默認是提供了它的 構造函數的，在 Blink 中我們重寫父類的構造函數，而像 this 這些是在 Component 或者更高一個層次中被初始化的，那麼我們需要在 Blink 中，調用父類的構造函數，從而對 this 初始化或者定義。

解答二:

僅當你想在 constructor 內使用 props 纔將 props 傳入 super 。React 會自行 props 設置在組件的其他地方（以供訪問）。
將 props 傳入 super 的作用是可以使你在 constructor 內訪問它.

如果你只是想在別處訪問它，是不必傳入props的，因爲 React 會自動爲你設置好：

(一) React Native - 瞭解文件結構

(三) React Native - 樣式