RN作為H5的下一代跨平臺方案，風頭正勁。用UC震驚部的話來說：沒有研究過RN，都不好意思說自己做過客戶端。現在還不了解學習React-Native，你就要快老了！
好了，拋開標題的噱頭。寫下這篇文章的主要目的，還是作為自己的一個學習記錄與匯總，同時對RN的踩坑與學習的經驗進行分享，總結ES 6的常用語法，頁面的生命周期與相關的一些學習資料。讓其他客戶端開發者能快速的對React-Native進行接入與學習。文章包含以下內容：
- 為什么使用RN
- RN的簡單用例
- ES 6語法
- RN的生命周期
- 坑點匯總
為什么選擇RN
其實在一開始我也曾思考過這個問題。既然現在已經有成熟的H5方案了，為什么還要選擇RN？
最根源的想法還是來自于H5的痛點。頁面的交互性差，數據緩存，回傳回調困難。在使用過程中也難以滿足用戶所需的多元化功能與快速響應的速度。面對這種情況，以往我們只能委屈求全，摘掉一些耗時長，操作復雜的功能。亦或是舍棄使用H5，最后改由客戶端實現，已達到最好的用戶體驗。其次，也是作為一個技術的自我學習心態的驅使。React-Native作為編寫Hybrid APP的新思路，不管項目需要接入與否，我們都有必要去學習與了解其中的原理和使用。即作為一個知識儲備，也能更好的學習里面的新思想。作為一個客戶端開發者，Redux的設計給我的思考與收獲也是很大的。
總結下來，RN具有以下優勢：
- 運行性能更好，調用原生組件。
- 采用了css，flexbox的布局模式，方便開發。
- 比起 Hybird 擴展性更強，自由度更高，交互體驗更好。
- 支持應用熱更新與遠程調試。
- 展示復雜的高階動畫，能通過原生平臺編寫，更少卡頓。
- 大部分代碼都可跨平臺，易于維護。
- 和weex相比，社區環境更優秀，也有更多成熟的應用使用RN方案。
RN的簡單用例
以下是RN最簡單的樣例，分為三部分組成：
1.對象、組件的導入
2.樣式的聲明
3.組件的使用與樣式引入
4.注冊入口類。將與Native中代碼的設置對應（這里為'rn'）。
// 1
import React, { Component } from 'react';
import {
AppRegistry,
Text,
Button,
View,
TouchableHighlight,
Image,
StyleSheet,
} from 'react-native';
// 2
const style = StyleSheet.create({
centerSelf:{
alignSelf: 'center',
},
centerJustify:{
justifyContent: 'center',
},
centerItems:{
alignItems: 'center',
},
red:{
backgroundColor: 'red',
},
});
// 3
class HelloWorldApp extends Component {
componentDidMount(){ // 頁面加載后
// do something...
}
render() {
return (
<View style={[{flex:1}, style.red, style.centerItems, style.justifyContent]}>
<Text style={[{fontSize: 20}, {fontWeight: "bold"}]}>Hello ，?? !</Text>
</View>
);
}
}
// 4 注意，這里用引號括起來的'rn'必須和你init創建的項目名一致
AppRegistry.registerComponent('rn', () => HelloWorldApp);
可以看出其實RN的組件與樣式的使用與H5的標簽的使用非常相似。只要在給style傳入樣式，就可以實現布局了。上述代碼的效果也很簡單，只有 View 與 Text 兩個組件。
外層 View 大小隨外層大小變化并填充滿(flex:1)。同時 View 的背景為紅色(backgroundColor: 'red')。他的子組件將會水平居中(alignItems: 'center')與垂直居中(justifyContent: 'center')。嚴格說來應該是主軸與次軸居中，RN中組件可以設置豎直或水平方向為主軸。
內層為 Text 組件內容顯示為 粗體，黃色 的 Hello ，?? !。
從上不難看出RN的樣式其實就是傳入配置json。使其使用起來和H5類似。因此，當多個樣式同時使用時需要用數組傳入。
style = {style.red} // 傳入樣式對象
style = {{fontSize: 20}} // 編寫傳入對象
style = {[style.red, style.centerItems]} // 傳入多個樣式則通過數組配置
RN的頁面生命周期也與客戶端類似，有各種加載與渲染的過程，如// 3 中的componentDidMount，與iOS的 ViewDidLoad 用法類似。下面就讓我們來認識一下React-Native組件的生命周期。
RN 的組件生命周期
主要分為 Mounting（加載）, Updating（更新）, Unmounting（卸載）過程。Mounting操作在組件實例化的時候將被調用，Updating會在組件 props 或 state 變化的時候調用，而Unmounting則負責頁面銷毀。
Mounting
組件實例化時以下函數會被調用或插入 Dom 樹。加載過程如上述流程圖的最上側框圖。
Updating
一般當屬性或組件狀態變化的時候會觸發，以下方法會在組件重新渲染的時候調用。更新調用鏈如上述流程圖左下側框圖。
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
Unmounting
在組件 Dom 樹刪除時調用。卸載調用鏈如上述流程圖右下側框圖。
ES6 常用語法
定義組件
ES 6與ES 5定義組件的代碼有很大變化，ES 6終于有了類的聲明，也讓我們看順眼多了。為了代碼的維護和使用，已經不再建議使用ES 5的語法了。
// ES5 的用法，不建議
var View = React.createClass({
render(){
// 輸出變量
return (<Text>Hello，{this.props.name}！<Text />);
}
})；
// ES6
class View extends React.Component{
render(){
// 跨組件傳值
return (<React.View title='頁面' state=...this.props.route />);
}
}
屬性初始化與校驗
ES 6類屬性的初始化建議在構造函數中constructor實現。其中也提供了一個屬性propTypes，用以校驗某個變量是否必要。使用如下：
class MyView extends React.Component{
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}
// 默認值（組件不傳遞值過來的時候）
static defaultProps = {
name: "bilibili",
nick: "2333",
}
// propTypes用于驗證轉入的props，當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告
static propTypes = {
name: React.PropTypes.string.isRequired,
nick: React.PropTypes.number.isRequired,
}
state = {
city: this.props.city,
index：this.props.index,
}
}
導入與導出
ES 6 另一個讓我覺得便利的地方就是，新的導出方式。不再像以前一樣，需要用類似module.exports={xxx}這樣一點也不美觀的方式導出。并且別名與通配符的使用也很好的防止了變量的沖突與導出。
//ES5
//接收對象
var o = require('../xx/xx.js'); // 模塊導入
module.exports={ // 模塊導出
add:add,
sub:sub
}
//ES6
// 按照變量名導入
import {* as all , userInfo，userToken as uToken，userXXX} form 'test.js';
// 默認導入
import xxx form 'test.js'; // 導入用 default 修飾的默認對象
export {
info as userInfo, // 別名
token as userToken,
xxx as userXXX
};
export default { abcde }; // 默認導出
塊級變量let
在這里提出的主要原因是他和我們客戶端常見所理解的let不大一樣，并不是代表常量的意思（swift，kotelin）。而是代表塊級變量（js里常量是const），生命周期只在代碼塊里有效。雖然塊級變量在很多語言中都已很常見，但原js中并沒有提供塊級變量的使用。而var是全局可用的。這里提出避免誤用。
// var 容易造成的問題
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10,如果把 i 聲明為 let，則輸出為6
其他
以下是一些曾令我疑惑的語法，不一定屬于ES 6的新特性。但同屬js的語法，因此放在ES 6常見特性的最后。
// 重點在于 state=...this.props.route,相當于把所有命名一致的變量傳入
<React.View title='頁面' state=...this.props.route />
// 類似的
const {name,type} = this.items;
//等價于下面
const name = this.items.name;
const name = this.items.type;
坑點匯總
坑點的匯總主要分為兩各部分，框架踩坑與語言特性踩坑。
框架踩坑
1.接入坑點
因為RN的迭代速度有點快，官方文檔往往更不上代碼的變動速度。Stack Overflow里面相對的解決方案也比較少，且適用性隨版本變化。因此，很多坑不能在網絡資源中獲得答案，而是要在GitHub里的issue，在對應問題中一般都能找到前人的填坑記錄。
其中，最常見的問題便是<jschelpers/...> not find!。但在不同版本中，但原可能不同。
0.45版本 RN 需要引入 BatchedBridge，不然運行會出現類似報錯。而雖然 0.40版本下也會出現這個問題，但原因是 CocoaPod 需要升級到最新版，把1.1版本升到1.2.1就可以解決了。（其他版本未測試過）
#根據實際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'BatchedBridge', # 0.45 需要添加這行
'RCTImage',
]
# 如果你的RN版本 >= 0.42.0，請加入下面這行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
2.第三方庫使用
類似的，在使用第三方庫的時候，第三方庫不一定會隨著RN的跟新做出變化。
React-Native link這個方便的命令有時候用起來就會莫名的惱火。可以的話，第三方庫還是通過 CocoaPod 手動引入的好。React-Native link容易遇到的問題一般是找不到<React/xxx.h> not find!。 遇到這類問題，一些文章會建議把第三方尖括號<React/xxx.h>引用改成引號"React/xxx.h"。但這樣改動太大，且不便于操作。在我研究對比RN
0.39和0.40的配置區別后，發現主要是xcode 項目配置Alaways Search User Paths導致的。因此，在第三方庫的Header Search Paths加入CocoaPod的Pod目錄Public里的React文件夾作為搜索路徑就好了(0.45在Development文件夾里)。同時需要把第三方庫的Alaways Search User Paths設成 YES 。
</br>
語言特性踩坑
1.沒有宏定義
全局變量無法當做宏定義使用，沒有預編譯。全局變量需要運行后才有值，無法在 import 里面當路徑宏使用。
2.引入的資源必須用靜態路徑
Require 圖片資源時必須為靜態路徑，因為require是在編譯時期執行，而非運行時期執行。這個動作會發生在運行之前。如果你使用了變量，打包的時候變量并不會有值。RN會給你報錯。
3.編譯檢錯
只有語法補全的插件，即使語法錯誤，運行后才能得知運行結果。
例如：
if(...) A(); else (error code)...; 的代碼。測試時，如果不走else的判斷，連語法錯誤都不會檢查。如果是夾雜多個的判斷，進行語法檢錯也是需要全部走完。
4.弱類型語言要注意語境
js為弱類型語言且空類型多（如下方第5點所示）。js 判斷時會出現強類型語言考慮之外的情況，編寫的代碼在類型轉換的思考上要更為周全。也會出現一些感官上覺得奇怪的代碼,如下所示：
return !!b; // 兩次強轉，保證變量返回是 Boolean 類型`
return a==1?a:0 // 沒有寫成a==1?1:0，可能業務上結果會返回字符串和數字類型，不能確定
5.類型較多對比時容易弄混
容易弄混的有0、-0、null、""、false、undefined或者NaN。
其中：
- undefined：未定義或未賦值的變量
- null ：特殊的object類型，為空對象，和swift 的拆包的空盒模型類似。
- NaN：特殊的number，類似盒子模型拆盒后為空，而不為0。
以下為容易混淆的對比點：
6.this的作用域問題
this的指向場景會根據使用情況變化。而對于不熟悉語言的客戶端開發者來說，會經常對指向對象錯誤的操作。this的指向場景分別四類：
- 有對象就指向調用對象
- 沒調用對象就指向全局對象
- 用new構造就指向新對象
- 通過 apply 或 call 或 bind 來改變 this 的所指。
這個問題的解決，最主要還是了解其中的機制?？梢詤⒖歼@篇文章《作用域與閉包：this，var，(function () {})》。
附錄
數值的常見用法和結果。
用 法 結 果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
parseInt("AF", 16); //returns 175
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
參考資料：
[1] React-Native官方文檔
[2] React Native 中文網
