Props(屬性)
通過屬性控制表現(xiàn)
大部分的組件(Components)都可以通過參數(shù)靈活的定制它們的行為呼胚，這參數(shù)被稱之為props朗兵。
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
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}}/>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
這段代碼中的組件是Image膳音， 屬性是 source达皿、style姐刁。
花括號{}是變量引用的模版語法逊移，它還擁有一個能力就是任何javascript的表達式都能包裹，例如： {\n}龙填、 { {width: 193, height: 110} }胳泉、 {VARIABLE}拐叉。
注意: style={{ }} 如果理解為 {{ }} 是變量引用是錯誤的(它不是python)，因為 style 要么支持一個對象扇商，要么支持一個字典凤瘦，如果填寫變量的話應(yīng)該是{styles.welcome}，如果是一個字典的話 { {width: 193, height: 110} }案铺。
通過屬性擴展自定義組件
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(狀態(tài))
在react native中蔬芥，通過利用 props 和 state 這兩個數(shù)據(jù)類型，來控制一個組件的數(shù)據(jù)動態(tài)實時的展示控汉，其中props一般用于更新數(shù)據(jù)笔诵，state用于更新表現(xiàn)。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
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('rn_practice', () => BlinkApp);
代碼分析
-
constructor是EcmaScript 2015版本中新增的特性<構(gòu)造器>姑子，常用于繼承(inheritance 需配合super)和共享屬性(properties)乎婿。 -
let display = this.state.showText ? this.props.text : ' ';這里采用了條件運算符， 當 this.state.showText 為True時, 將this.props.text賦值給dispaly街佑，否則將 ' ' 賦值給display谢翎。 -
setInterval是EcmaScript/Javascript中的一個內(nèi)置函數(shù)，用于根據(jù)給定時間持續(xù)輪詢執(zhí)行內(nèi)嵌代碼塊沐旨。 setInterval有一個規(guī)律森逮，那就是必須等待當前所有代碼已經(jīng)執(zhí)行完畢后（也就是當前線程空閑之后），才開始執(zhí)行磁携，并且不會停下來褒侧，除非我們明確的指定了clearInterval之后才會停下來。下面提供一個樣例代碼和結(jié)果進行說明：文件名testInterval.js
setInterval(function () { console.log('hello world!') }, 100); for (let i=0; i<100000; i++) { console.log('hello'+i) }執(zhí)行文件
C:\WebstormProjects\ecmascript_practice>node --harmony testInterval.js輸出結(jié)果
hello0 hello1 ... ... hello99999 hello world! hello world! hello world! hello world! -
!this.state.showText這段代碼用于取相反值谊迄，整一個代碼塊的意思是璃搜，每一秒鐘去修改一次setState的只，且每次都是返回相反值鳞上。// Toggle the state every second setInterval(() => { this.setState({ showText: !this.state.showText }); }, 1000); -
this.state雖然我沒有看到說明这吻，但經(jīng)測試每次發(fā)生變更時，都會重新執(zhí)行一次render()篙议。這里提供一個樣例代碼來說明測試結(jié)論唾糯。
測試樣例代碼
測試樣例代碼
測試日志
測試日志
另外，react native官網(wǎng)重點聲明鬼贱，不可以通過
this.state = 'xxx'來直接篡改狀態(tài)值移怯，而應(yīng)該是通過 this.setState() 來改變。
補充：
<React Native 跨平臺移動應(yīng)用開發(fā)>一書中（2.7章節(jié)/37-41頁）这难，詳細的說明了狀態(tài)的行為和表現(xiàn)舟误。
- render 是渲染UI界面。
- this.state 組件狀態(tài)姻乓，當該狀態(tài)發(fā)生變更后嵌溢，會要求render重新渲染眯牧，通過這種方式達到數(shù)據(jù)與ui保持一致。
