? ? ? ? 這是本菜鳥的第3篇博文找颓，筆主是學(xué)iOS 開發(fā)的芋忿，剛學(xué)玩iOS出來找工作就發(fā)現(xiàn)iOS沒人要了宏赘。O(∩_∩)O哈哈~！手動(dòng)滑稽
? ? ? ?Javascript是我接觸的第一門腳本語言适贸，反正學(xué)習(xí)過程是吃了那啥般難受灸芳！
? ? ? 如果想入手React Native的話推薦先去React Native中文網(wǎng)看看，也可也先看看老馬的
? ? ? 給所有開發(fā)者的React Native詳細(xì)入門指南（第一階段）這篇文章介紹得很詳細(xì)拜姿！推薦＠友！
? ? ? 效果圖如下
? ? ? 如果有Web前端的小伙伴學(xué)過React框架的話一眼就能看懂其中的原理
? ? ?先來兩篇干貨：3分鐘搞定React/React Native之狀態(tài)機(jī)原理
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??利用RN狀態(tài)機(jī)管理組件狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 從零學(xué)React Native之02狀態(tài)機(jī)
? ? ?這兩篇文章都是介紹React Native狀態(tài)機(jī)的!我之所以再寫一篇是對(duì)自己學(xué)習(xí)的一個(gè)總結(jié)蕊肥，然后就是和大家分享交流一下谒获！
正文了喲！１谌础批狱！
Q:狀態(tài)機(jī)是什么？
A：我的理解是：事件或視圖對(duì)應(yīng)著許多的場(chǎng)景展东，我將每個(gè)場(chǎng)景視為一種狀態(tài)赔硫，把展示出來的場(chǎng)景叫做活動(dòng)狀態(tài)，?根據(jù)展示的不同切換不同的場(chǎng)景盐肃，切換場(chǎng)景就是切換狀態(tài) ?
Q:狀態(tài)機(jī)有什么用爪膊？
A: React Native 中就是拿來渲染UI权悟，根據(jù)不同的狀態(tài)渲染不同的UI，也就是上面所說的場(chǎng)景推盛。簡(jiǎn)單的說就是狀態(tài)機(jī)的值一旦變化, 默認(rèn)界面就會(huì)重新渲染,這樣一個(gè)過程可以很輕松的做到數(shù)據(jù)與UI保持一致.我們只需要控制狀態(tài)機(jī)中的值就行.
Q:怎么用峦阁？
上面代碼中我自定義了一個(gè)Button組件（PS：自定義組件名首字母要大寫！Ｐ』薄Ｄ磁伞）荷辕，我這個(gè)組件就只做一件事情凿跳，點(diǎn)擊切換背景顏色。
在構(gòu)造函數(shù)constructor中我初始化了一個(gè)狀態(tài)clickState 并為其默認(rèn)值為false疮方，
constructor(props) {
super(props)
this.state = {
clickState : false
}
}
處理點(diǎn)擊事件的函數(shù)changeColor() 每調(diào)用一次該函數(shù)就clickState取反一次控嗜，在this.setState（）函數(shù)中修改點(diǎn)擊狀態(tài)
Tip:? this.state確定當(dāng)前狀態(tài)，this.setState改變當(dāng)前狀態(tài)骡显。當(dāng)需要改變狀態(tài)機(jī)變量的值時(shí), 一定要并且只能使用this.setState函數(shù),永遠(yuǎn)不要出現(xiàn)"this.state.某狀態(tài)機(jī)變量名=某值" 這樣的語句.這樣的語句從JS語法上來說是合法的, 站在RN角度上就是不合法的.
changeColor(){
this.setState({
clickState : !this.state.clickState
})
}
渲染:其中<TouchableOpacity>標(biāo)簽是React Native 的元組件（自帶組件）疆栏，用于處理點(diǎn)擊事件，點(diǎn)擊后執(zhí)行changeColor()函數(shù)
backgroundColor: (this.state.clickState == false)? '#f44e14' : '#b2b'
backgroundColor根據(jù)clickState的不同狀態(tài)取不同的顏色值
最后使用該組件
不是太理解的地方歡迎留言惫谤，期待大家給我點(diǎn)個(gè)喜歡支持下我唄
