react-native 开发小结（Android）
在windows上開發react-native已經有一些時候了。作為一個Android原生開發者，在開發的過程中，雖然有點蛋疼，但畢竟積累了一點點經驗，再不說出來，我就要側漏了......
1，前言
react-native開發使用的是JS,但是并不是純正的JS,而是一種JSX語言，就是在JS中嵌入XML語言，因此，只要有一些JS的語法基礎的原生開發者，就可以肯容易理解JSX的語法了，在RN中，推薦使用ES6的語法。
對于JS而言，一切皆對象，函數也是對象，而對象的內部是通過key-value的形式來組成的，也可以說是通過json格式來組成。對象內部每一個鍵值對（key:value）稱作一個屬性（RN中最重要的屬性是state和props）。
2，性能
使用react-native開發的最大的有點在于開發效率，加入APP并不復雜的話，那么完全可以使用純JS開發，也就是Android和iOS公用一套界面和邏輯。極大的提高了開發效率。在性能上，（Android中一般的操作）RN的表現比原生弱一些，但是遠好于H5。所以總體來看，其實RN的未來還是可以期待的。
3，RN運行機制簡述
RN是運行JS的，Android是運行Java字節碼的，所以，實際上JS代碼的最終運行是通過一層封裝，把JS的代碼映射成原生代碼，而界面上的元素最終使用的也是原生的組件，而不是自己渲染（所以在性能上，RN比H5要好很多）。
4，Component簡介
在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：組件。我覺得Component和原生的Fragment其實很像，都存在于activity中，都受制于activity的生命周期，都可卸載和裝載。
4.1，Component生命周期
由上圖可知，大致分三個過程：初始化，運行中，卸載。
- 初始化階段：
- 在新版的Component中ES6語法中，getDefaultProps,getInitialState 是不應該被復寫的。RNAPI要求我們props，state的初始化在Component的constructor函數中完成（props，state這倆大寶貝下文在做解釋），因此在初始化階段可以做的就是在constructor或者componentDidMount函數中完成相關初始化工作。
- componentDidMount函數是組件第一次繪制完成之后被調用的，整個周期只被調用一次，在這里可以做一些網絡請求操作等。
- 運行階段：
- 重點在于修改state內容，來刷新界面
- 卸載階段
- 在componentWillUnmount方法中做一些移除操作，或者什么都不做。
在這里，已經有前輩寫出了比較詳細的博文了，有興趣請前往React Native 中組件的生命周期。
4.2，state和 prop
這兩個屬性之所以重要，是因為stat和界面的刷新有關，prop則和組件的封裝有關。
state初始化在構造函數中，通過setState來修改里面具體的值。具體如下：
而修改state內容則是這樣：
當state中的內容被修改后，當前組件就會按照生命周期來刷新頁面，這樣，所有和界面刷新的任務就全部交到state這一個屬性手里了。這是一個很不錯的設計。
而prop這個屬性，則是用于封裝組件的時候對外暴露組件的可輸入屬性。即就像這樣：
就這樣，封裝組件中的所有你想暴露給別人輸入的屬性都可以定義在prop之中。
4.3，component間的跳轉
在原生開發中，界面的跳轉主要依賴Intent作為橋梁，而在RN中，則全部依靠Navigator這個組件來實現頁面之間的跳轉邏輯。
- initRoute這個屬性指定了初始化的頁面，在這個例子中，進入第一屏的頁面將是TabBarView,
- configureScene這個屬性用于指定默認跳轉動畫
- renderScene這個屬性傳入的是一個方法，根據得到的不同的組件（component）來渲染不同的場景。
Navigator這個導航器是全局的，整個APP中只有一個，會根據界面的跳轉傳遞到每個Component內部的prop中。Navgator會維護一個棧，這一點和原生的Activity的任務棧極其相似，可以對照理解。
- 數據傳遞 上面的代碼中有這樣一段：
{...route.passProps}保證passProps里每個key都會被視作prop的一個屬性，具體如下：
跳轉到SecondPageComponent界面
navigator.push({name: 'SecondPageComponent',component: SecondPageComponent,passProps: { //注意passProps和之前定義的保持一致msg:'ladingwu is handsome'} });復制代碼而在SecondPageComponent界面界面中，這樣來取數據：
export default class SecondPageComponent extends React.Component {componentDidMount() {//這里獲取傳遞過來的參數var message=this.prop.msg;} }復制代碼怎么樣，簡單極了吧。當然，在原生開發中，還有startActivityForResylt()這個方法可以再從第二個界面返回時獲取數據，那么在RN中是否能做到呢？也很簡單，依然是通過傳遞參數，只不過這個時候的參數，應該是一個回調函數（js中，函數也可以當作參數，一切皆對象）
跳轉到SecondPageComponent界面
navigator.push({name: 'SecondPageComponent',component: SecondPageComponent,passProps: { //注意passProps和之前定義的保持一致getMsg:(msg)=>{console.log(msg)}} });復制代碼而在SecondPageComponent界面界面中返回數據：
export default class SecondPageComponent extends React.Component {componentDidMount() {//這里獲取傳遞過來的參數this.prop.getMsg('ladingwu is still handsome');} }復制代碼不要太簡單哦。。。。
5，總結
當然，RN還有很多可以說的，比如動畫（性能有點感人），網絡請求，數據存儲等等，就不一一舉例說明了。
說一點感想，使用RN開發這段時間，感覺這玩兒確實可以提高工作效率，畢竟Android和iOS使用一套界面，而且很多功能在RN上都有完備的實現，基本上，只要APP的業務邏輯不復雜，或者并不涉及到很多硬件操作或對性能要求很高的話，使用純RN開發是完全可以的。假如H5是未來的話，那么在未來來臨之前，RN才是更好的選擇，當然，RN并不能完全取代原生開發，因為它只是在原生和H5之間找平衡的產物，它當然好，但也不是最優解。
你是不是該學？
應該，即使只是沖著JS也要去學一把，如今，JS不僅霸占了web端，還入侵了移動端和后臺開發，我就問你怕不怕？
最后推薦幾個學習RN必備網站：
React-Native中文站(非官方)
React-Native官方網站
江清清的技術專欄
google搜索引擎
總結
以上是生活随笔為你收集整理的react-native 开发小结（Android）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： maven repository
- 下一篇： 【优达学城测评】求T-test值，P-v