React Native學習指南：必知的 Props 與 State

莫比烏斯環發表於2018-10-12
React Native

Props（屬性）與State（狀態）

我們通常使用兩種資料來控制一個元件：props和state。props是在父元件中指定(傳遞到子控制元件)，而且一經指定，在被指定元件的生命週期中則不再改變。 對於需要改變(通常指使用者互動反饋)的資料，我們需要使用state重新渲染(render)元件(即實現區域性重新整理)。——React Native 中文網

下面就讓我們分別對 props 和 state 做相應的介紹和使用：

1.Props(屬性)

  • 定義：大多陣列件在定義時就可以通過各種自定義引數來實現元件的定製。對外提供的這些引數就稱為props （屬性）。

  • 以常見的基礎元件Image為例，在建立一個圖片時，可以傳入一個名為source的prop來指定要顯示的圖片的地址，以及使用名為style（同css樣式style屬性）的prop來控制其尺寸。

/**
 * 圖片尺寸
 * Created by liyanxi on 2016/11/28.
 */

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

export default class ImageDimension extends Component {
    render() {
        let pic = {
            uri: "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg"
        }
        return (
            <View style={styles.container}>
                <Image source={pic} style={styles.imgStyle}></Image>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',//vertical
        alignItems: 'center',   //horizontal
        backgroundColor: '#F5FCFF',
    },
    imgStyle: {
        width: 193,
        height: 110
    }
});
複製程式碼

注 上面return返回語句為JSX語法，在render函式中元件以<開始，表示式或變數以{開始；此處source為Image載入圖片資源連結引數不可更改，{} 括號內為js變數或表示式，需要執行後取值，因此我們可以把任意合法的JavaScript表示式通過括號嵌入到JSX語句中。

  • 自定義的元件也可以使用props。通過在不同的場景下使用不同的屬性定製，從而提高自定義元件的複用度。只需在render函式中引用this.props--property-->this.props.property即可。下面看自定義元件和實際呼叫render函式程式碼：
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>
    );
  }
}
複製程式碼

注 上面程式碼沒什麼可說的，主要注意一點：入參名稱（name）要與自定義元件內部呼叫名稱（name）一致，負責會報錯（入參或出參找不到或未定義），比較好的寫法就是在自定義元件Greeting中預設初始化props即：this.props = {name:""}，涉及到props state初始化的不同（ES5與ES6的 區別 ）此處不做詳解，後面會單獨說明。

2.State(狀態）

  • 前面已經描述過，作為使用者互動設計產生的反饋通常都是通過state來進行資料的改變、介面的重新整理。 與props一樣都是作為控制元件的，唯一的區別是否需要及時改變。引用方式也比較簡單同props即：this.state.property,比props多的一個方法就是在於改變setState,在需要更新資料的地方呼叫此方法設定值就行（實際相當於重新呼叫render函式）。具體使用可參考如下程式碼示例：
/**
 * react native 輸入元件除錯
 * Created by liyanxi on 2016/11/28.
 */
import React, {Component} from 'react';//ES6語法
import {StyleSheet, View, TextInput, Text} from 'react-native';

export default class TextInputComponent extends Component {//ES6語法
    /**
     * ES6 建構函式中：state 或 props 初始化
     * ES5 getDefaultProps、getInitialState
     */
    constructor(props) {
        super(props);
        this.state = {inputText: ""};
    }
    /**
     * 唯一根佈局
     * @returns {XML}
     */
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    style={styles.input}
                    placeholder={"Type here to translate!"}
                    onChangeText={(text)=> this.setState({inputText: text})}>
                </TextInput>
                <Text style={styles.showText}>
                    {this.state.inputText.split(" ").map((word)=> word && 'Q').join(" ")}
                </Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10
    },
    input: {
        fontSize: 20,
        borderWidth: 1,
        borderColor: 'skyblue',
        // padding: 5 系統預設padding簡直是個坑,可根據實際自身做調整
    },
    showText: {
        fontSize: 32
    }
});
複製程式碼

注 此處程式碼中標註的ES5與ES6的區別此處不做詳述（後續單獨講解），需要學習的可參考 React/React Native ES5 ES6寫法對照表

3.完整程式碼見Github

學習網站

相關文章