簡(jiǎn)介
大多數(shù)組件在創(chuàng)建時(shí)就可以使用各種參數(shù)來(lái)進(jìn)行定制有送。用于定制的這些參數(shù)就稱為props（屬性）。
我們使用兩種數(shù)據(jù)來(lái)控制一個(gè)組件：props和state行拢。props是在父組件中指定旭愧，而且一經(jīng)指定辽狈，在被指定的組件的生命周期中則不再改變寥殖。 對(duì)于需要改變的數(shù)據(jù)玩讳，我們需要使用state。
props（屬性）
以常見(jiàn)的基礎(chǔ)組件Image為例扛禽，在創(chuàng)建一個(gè)圖片時(shí)锋边，可以傳入一個(gè)名為source的屬性(prop)來(lái)指定要顯示的圖片的地址皱坛，以及使用名為style的屬性(prop)來(lái)控制其尺寸编曼。
import React, { Component } from 'react';
import { Image } from 'react-native';
export default 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}} />
);
}
}
請(qǐng)注意{pic}外圍有一層括號(hào)，我們需要用括號(hào)來(lái)把pic這個(gè)變量嵌入到JSX語(yǔ)句中剩辟。括號(hào)的意思是括號(hào)內(nèi)部為一個(gè)js變量或表達(dá)式掐场，需要執(zhí)行后取值。因此我們可以把任意合法的JavaScript表達(dá)式通過(guò)括號(hào)嵌入到JSX語(yǔ)句中贩猎。
當(dāng)然你也可以寫(xiě)成這樣
import React, { Component } from 'react';
import {
Image
} from 'react-native';
export default class Bananas extends Component {
render() {
return (
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={{width: 193, height: 110}} />
);
}
}
Image組件用于顯示圖片;
source屬性指定顯示圖片的地址熊户，有兩種指定形式：
- 指定本機(jī)文件：
source={require('./icon.png')}，吭服，相對(duì)位置尋址- 注：： 如果你有
my-icon.ios.png和my-icon.android.png嚷堡，Packager就會(huì)根據(jù)平臺(tái)而選擇不同的文件。
- 注：： 如果你有
- 指定網(wǎng)絡(luò)圖片：
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}- 注：： 一般需要手動(dòng)指定圖片的尺寸
style={{widtn:193,height:110}}
- 注：： 一般需要手動(dòng)指定圖片的尺寸
下面是指定本機(jī)文件的寫(xiě)法
import React, { Component } from 'react';
import{ Image, View } from 'react-native'
export default class APP extends Component {
render() {
return(
<View>
<Image source={require('./img/guide.png')} />
</View>
);
}
}
自定義的組件也可以使用props。通過(guò)在不同的場(chǎng)景使用不同的屬性定制蝌戒，可以盡量提高自定義組件的復(fù)用范疇串塑。只需在render函數(shù)中引用this.props，然后按需處理即可北苟。
下面的例子把Greeting組件寫(xiě)在JSX語(yǔ)句中桩匪，用法和內(nèi)置組件并無(wú)二致，我們?cè)?code>Greeting組件中將name作為一個(gè)屬性來(lái)定制友鼻，這樣可以復(fù)用這一組件來(lái)制作各種不同的“問(wèn)候語(yǔ)”傻昙。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
//在組件中，獲取屬性的方法如下代碼：
class Greeting extends Component {
//每一個(gè)組件中必須有一個(gè)render方法彩扔，用于輸出組件
render() {
//使用return來(lái)返回要輸出的內(nèi)容
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
//定義屬性：
export default class App extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='zhang' />
<Greeting name='wang' />
<Greeting name='zhao' />
</View>
);
}
}
組件的用法與原生的 HTML 標(biāo)簽完全一致妆档，可以任意加入屬性，比如<Greeting name="wang">借杰，就是Greeting組件加入一個(gè)name屬性过吻，值為wang。組件的屬性可以在組件類的this.props對(duì)象上獲取蔗衡，比如name屬性就可以通過(guò)this.props.name讀取纤虽。
State（狀態(tài)）
我們使用兩種數(shù)據(jù)來(lái)控制一個(gè)組件：屬性(props)和狀態(tài)(state)。屬性(props)是在父組件中指定绞惦，而且一經(jīng)指定逼纸，在被指定的組件的生命周期中則不再改變恕沫。 對(duì)于需要改變的數(shù)據(jù)侣灶，我們需要使用狀態(tài)(state)灿渴。
一般來(lái)說(shuō)懈贺，你需要在constructor中初始化狀態(tài)(state（譯注：這是ES6的寫(xiě)法笼痛，早期的很多ES5的例子使用的是getInitialState方法來(lái)初始化state碰逸，這一做法會(huì)逐漸被淘汰）鸟废，然后在需要修改時(shí)調(diào)用setState方法拾碌。
假如我們需要制作一段不停閃爍的文字雁乡。文字內(nèi)容本身在組件創(chuàng)建時(shí)就已經(jīng)指定好了第喳，所以文字內(nèi)容應(yīng)該是一個(gè)屬性(prop)。而文字的顯示或隱藏的狀態(tài)（快速的顯隱切換就產(chǎn)生了閃爍的效果）則是隨著時(shí)間變化的踱稍，因此這一狀態(tài)應(yīng)該寫(xiě)到狀態(tài)(state)中曲饱。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
//constructor 構(gòu)造函數(shù)
constructor(props) {
super(props); //執(zhí)行父類的方法
this.state = { showText: true };
// 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根據(jù)當(dāng)前showText的值決定是否顯示text內(nèi)容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
export default 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>
);
}
}
constructor
我覺(jué)得在這里有必要介紹一下constructor屬性，當(dāng)你在React class中需要設(shè)置state的初始值或者綁定事件時(shí)珠月，需要加上constructor(){}
我們知道扩淀，在JavaScript中，constructor返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用啤挎。
例程如下驻谆，前者輸出內(nèi)容，后著輸出整個(gè) constructor構(gòu)造函數(shù)
<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
</script>
<script type="text/javascript">
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor);
</script>
輸出結(jié)果：function employee(name,job,born) { this.name=name; this.job=job; this.born=born; }
而在react-native中，用法是稍微有些區(qū)別的
onstructor方法中出現(xiàn)了super關(guān)鍵字胜臊，它在這里表示父類的構(gòu)造函數(shù)氛谜，用來(lái)新建父類的this對(duì)象，子類必須在constructor方法中調(diào)用super方法区端，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)值漫，因?yàn)樽宇悰](méi)有自己的this對(duì)象，而是繼承父類的this對(duì)象织盼，然后對(duì)其進(jìn)行加工杨何。如果不調(diào)用super方法，子類就得不到this對(duì)象沥邻。
取反操作
// 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
這里其實(shí)就是將this.state的值作為一個(gè)參數(shù)previousState傳了進(jìn)去危虱，previousState.showText跟this.state.showText是等價(jià)的；然后要通過(guò)return方法把值返回給state唐全，不然這個(gè)showText只是作為形參埃跷，不對(duì)外面的state產(chǎn)生影響。在這里previousState只起到中轉(zhuǎn)作用邮利，你可以把它改為任意值弥雹，不影響效果，就像下面這樣
this.setState(aa => {
return { showText: !aa.showText };
});
當(dāng)然如果覺(jué)得不好理解的話延届，也可以直接用下面這種寫(xiě)法
this.setState({showText: !this.state.showText});
State的工作原理和React.js完全一致剪勿，所以對(duì)于處理state的一些更深入的細(xì)節(jié)，你可以參閱React.Component API方庭。不過(guò)上面那個(gè)英文版的看著不方便厕吉，如果想學(xué)習(xí)更多關(guān)于react的知識(shí)的話，所以強(qiáng)烈推薦極客學(xué)院的中文版本
