上篇就做了個(gè)初始化斩郎，這次來(lái)點(diǎn)實(shí)際的脑融。
寫(xiě)RN我建議用webstorm，很強(qiáng)大的一款I(lǐng)DE孽拷。打開(kāi)我們的項(xiàng)目：
簡(jiǎn)單看一下項(xiàng)目結(jié)構(gòu)：
__test__: ?jest單元測(cè)試吨掌，表示沒(méi)耍過(guò)。
android: 安卓項(xiàng)目文件
ios: iOS項(xiàng)目文件
node_module: 依賴(lài)庫(kù)
余下的是一些配置文件以及項(xiàng)目入口文件 index.xxx.js。我們上篇之中運(yùn)行的代碼其實(shí)就是index.ios.js中的代碼膜宋。
說(shuō)到代碼窿侈，不得不說(shuō)一下RN的語(yǔ)法了，RN顧名思義就是用React寫(xiě)Native App秋茫，React使用jsx編寫(xiě)史简，就是js+xml，沒(méi)什么特別高端的地方肛著。這里我們大部分使用ES6的語(yǔ)法來(lái)寫(xiě)js圆兵。
1、組件
一開(kāi)始就開(kāi)始說(shuō)組件不知道會(huì)不會(huì)太快枢贿，組件是什么殉农？我個(gè)人理解就是一個(gè)可重復(fù)使用的模塊，Don‘t repeat yourself局荚，不要寫(xiě)重復(fù)的代碼超凳。
react中的組件稱(chēng)之為Component，這是react提供的一個(gè)基類(lèi)耀态，我們寫(xiě)的所有組件其實(shí)都是繼承自Component轮傍。
我新建了一個(gè)Treasures的項(xiàng)目，react生成的index.xxx.js中就寫(xiě)了一個(gè)與項(xiàng)目同名的組件Treasures首装，這個(gè)組件是作為app 入口組件创夜，文件底部寫(xiě)了注冊(cè)app接口：
AppRegistry.registerComponent('Treasures', () => Treasures);
2、組件的生命周期
constructor: 構(gòu)造器仙逻，這里最主要的功能就是初始化組件的state驰吓。
componentWillMount: 渲染之前，做數(shù)據(jù)請(qǐng)求即處理嘍桨醋，以便后面渲染出來(lái)棚瘟。
render: 渲染(必須)，沒(méi)什么可說(shuō)的喜最，別忘了return。
componentDidMount: 渲染完成后庄蹋，這個(gè)再React Web端是非常用的瞬内，可以用jquery處理組件，但是再RN中限书，可能就是一下小處理了虫蝶。
componentWillUnmount: 移除組件前，移除組件的時(shí)候有時(shí)也需要處理一些東西吧哈哈倦西。
簡(jiǎn)單的開(kāi)發(fā)主要用到上面這幾種能真，還有其余的生命周期函數(shù)我們用的的時(shí)候再說(shuō)。
3、props & state
props和state可謂是react里的精髓了粉铐，通過(guò)props在組件之間傳遞數(shù)據(jù)疼约，通過(guò)state動(dòng)態(tài)改變組件。什么意思呢蝙泼？先說(shuō)props程剥，我們寫(xiě)一個(gè)組件比如說(shuō)一個(gè)Button，組件名叫MyButton
<TouchableHighlight style={{backgroundColor: '#FFFFFF'}}>
? ? ? ?<Text>我是Button</Text>
</TouchableHighlight>
我在別的地方調(diào)用這個(gè)<MyButton />就會(huì)出現(xiàn)一個(gè)黑色的按鈕汤踏。但如果我想要白色的按鈕呢织鲸？這TM就尷尬了。溪胶。搂擦。所以我們需要把color作為props，這樣別的地方就可以通過(guò)給這個(gè)props值來(lái)生成不一樣顏色的MyButton哗脖。如下：
<TouchableHighlight style={{backgroundColor: this.props.color}}>
? ? ? ? <Text>我是Button</Text>
</TouchableHighlight>
這個(gè)時(shí)候我們需要這樣調(diào)用:
<MyButton color={'#000000'} />
這樣就可以想要什么顏色就有什么顏色的button了瀑踢，Nice！
再說(shuō)一下state吧懒熙，我們又一個(gè)選數(shù)量的組件丘损，就像這樣：
我點(diǎn)減號(hào)中間的數(shù)字減1，點(diǎn)加號(hào)加1工扎。這個(gè)組件很常用徘钥，我希望把它寫(xiě)成一個(gè)組件，怎么寫(xiě)呢：
... <Text> {this.state.num} </Text> ...
左右按鈕就不寫(xiě)出來(lái)了肢娘，分別是點(diǎn)擊之行plus和minus函數(shù)呈础，我們看一下plus函數(shù)怎么寫(xiě)：
plus(){
? ? ? ? this.setState({
? ? ? ? ? ? ? ? num: this.state.num + 1
? ? ? ? })
}
這里要注意的是state必須通過(guò)setState來(lái)改變，這里面牽扯到React內(nèi)部的機(jī)制橱健。這樣就實(shí)現(xiàn)了我們所需要的而钞，并且在點(diǎn)擊的時(shí)候只刷新了中間的數(shù)字。這就是典型MVVM設(shè)計(jì)思想拘荡，不得不佩服臼节。
講到這其實(shí)React中的組件不管是在Web還是Native都是一樣的。差別就是Web端可能是用<div>這樣的標(biāo)簽珊皿，我們也可以理解為組件网缝，RN中是用View組件。
這一部分就說(shuō)到這吧蟋定，順便說(shuō)說(shuō)這個(gè)組件的思想粉臊。我們?cè)赗eact中所有展現(xiàn)出來(lái)的都是基于Component，大到一整個(gè)頁(yè)面驶兜，小到一個(gè)按鈕扼仲。一個(gè)組件就是一種標(biāo)簽，如何細(xì)分組件就是一門(mén)藝術(shù)了哈哈哈哈哈屠凶。下次我們?cè)僬f(shuō)點(diǎn)別的喲西驰后！
