本文由 愛學園平臺 進行聯(lián)合編輯整理輸出
原作者：愛學園——莫比烏斯環(huán)
Props（屬性）與State（狀態(tài)）
我們通常使用兩種數(shù)據(jù)來控制一個組件：props和state。props是在父組件中指定(傳遞到子控件)，而且一經(jīng)指定，在被指定組件的生命周期中則不再改變。 對于需要改變(通常指用戶交互反饋)的數(shù)據(jù)，我們需要使用state重新渲染(render)組件(即實現(xiàn)局部刷新)?！?a target="_blank" rel="nofollow">React Native 中文網(wǎng)
下面就讓我們分別對 props 和 state 做相應(yīng)的介紹和使用：
1.Props(屬性)
定義：大多數(shù)組件在定義時就可以通過各種自定義參數(shù)來實現(xiàn)組件的定制。對外提供的這些參數(shù)就稱為
props（屬性）。以常見的基礎(chǔ)組件Image為例，在創(chuàng)建一個圖片時，可以傳入一個名為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函數(shù)中組件以<開始，表達式或變量以{開始；此處source為Image加載圖片資源鏈接參數(shù)不可更改，{} 括號內(nèi)為js變量或表達式，需要執(zhí)行后取值，因此我們可以把任意合法的JavaScript表達式通過括號嵌入到JSX語句中。
- 自定義的組件也可以使用
props。通過在不同的場景下使用不同的屬性定制，從而提高自定義組件的復用度。只需在render函數(shù)中引用this.props--property-->this.props.property即可。下面看自定義組件和實際調(diào)用render函數(shù)代碼：
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>
);
}
}
注 上面代碼沒什么可說的，主要注意一點：入?yún)⒚Q（name）要與自定義組件內(nèi)部調(diào)用名稱（name）一致，負責會報錯（入?yún)⒒虺鰠⒄也坏交蛭炊x），比較好的寫法就是在自定義組件Greeting中默認初始化props即：this.props = {name:""}，涉及到props state初始化的不同（ES5與ES6的 區(qū)別 ）此處不做詳解，后面會單獨說明。
2.State(狀態(tài)）
- 前面已經(jīng)描述過，作為用戶交互設(shè)計產(chǎn)生的反饋通常都是通過
state來進行數(shù)據(jù)的改變、界面的刷新。
與props一樣都是作為控制組件的，唯一的區(qū)別是否需要及時改變。引用方式也比較簡單同props即：this.state.property,比props多的一個方法就是在于改變setState,在需要更新數(shù)據(jù)的地方調(diào)用此方法設(shè)置值就行（實際相當于重新調(diào)用render函數(shù)）。具體使用可參考如下代碼示例：
/**
* react native 輸入組件調(diào)試
* 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 構(gòu)造函數(shù)中：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 系統(tǒng)默認padding簡直是個坑,可根據(jù)實際自身做調(diào)整
},
showText: {
fontSize: 32
}
});
注 此處代碼中標注的ES5與ES6的區(qū)別此處不做詳述（后續(xù)單獨講解），需要學習的可參考 <a target="_blank" style="text-decoration:none;">React/React Native ES5 ES6寫法對照表</a>
