好久沒有來更新部落格了，給大家說聲抱歉，人一旦懶惰起來連自己都害怕。可能是因為一個人生活，少了很多動力吧。這都是在給自己找理由。我在不偷懶了。
最近我要入坑了，公司安排我要開始搞React Native了，之前也給大家分享過一篇RN的搭建框架，那時候只是對RN感興趣想有時間學學，但是現在要投入更多的時間。

這周領導讓我給搭建分享下RN跨平臺開發技術，簡單的介紹一下，可是網上關於RN的技術部落格很多，語言描述性的缺很少，讓初學者沒有一個很好的概念去全面的瞭解RN，所以呢我就大概總結了一下RN跨平臺移動應用開發框架的介紹。

前言

隨著科技的發展，Android與iOS量大作業系統已經稱霸江湖（這種穩定對開發者是一件好事，相互競爭也讓兩大作業系統都在不斷的提升完善）。手機硬體配置越來越強大，能力越來越強大，價格越來越平易近人。手機現在已經成為了普通老百姓無時無刻不隨身攜帶的電腦。伴隨著這種趨勢，市場對移動應用的需求也越來越多，而且要求越來越高。。

這麼多年來，移動開發應用開發者做夢都希望有一個能跨平臺的開發工具，讓他們不要把同一個移動應用使用不同的開發語言寫兩遍。但是跨平臺開發工具的實現很難，很多先驅者倒在了這條路上。直到Facebook給大家帶來了React Native。

簡介

2015年3月26日，Facebook公司對外正式釋出了React Native – 使用React框架跨平臺開發原生移動應用的開源技術框架。開發者可以使用React Native 高效開發Android和iOS作業系統的應用程式。
它的設計理念是：使用React Native開發，即擁有Native的良好人機互動體驗，又保留了React框架的開發效率。
（Native是指使用原生開發環境開發的應用程式。Native的良好人機互動體驗是指當用戶手指在螢幕上操作時，被觸控的UI元件會發生視覺上的變化）
（而React是Facebook從2012年以來慢慢發展起來的一套開發框架，在這套框架上誕生了React.js用來進行網頁開發，以及React Native用來進行APP開發。《React、React.js、React native三者的關係後面具體來看》）

特點

1. 一次學習，隨處編寫

   React Native提出“Learn once, write anywhere”。使用React Native可為Android和iOS兩個作業系統開發應用程式，但不同平臺上的程式碼根據平臺會有細小區別，但開發思路是相同的。

2. 混合開發

   React Native允許開發者在React Native擅長的領域使用React Native開發，而在React Native不能實現的領域或者已經有原生程式碼實現好的領域直接使用原生程式碼。React Native 程式碼開發模組與原生程式碼開發的模組可以雙向通訊、無縫銜接。

   • 混合開發情況3種：
     
     • UI介面由React Native開發，但UI事件處理由原生程式碼執行。
       
       • 比如登入功能，React Native開發包含使用者名稱、密碼輸入以及登入按鈕控制元件的介面，使用者輸入相關資訊，點選登入按鈕後，React Native元件將使用者名稱和密碼傳給原生程式碼編寫的登入模組（Android：java開發，iOS：Object-C或Swift開發），讓原生程式碼執行登入操作。原生程式碼向伺服器傳送登入請求，並等待迴應。在伺服器迴應後，原生程式碼將受到的迴應中的登入成功與否，以及其它的一些需要向UI展示的資料傳遞給React Native元件，React Native接收並解析這些資料，執行UI更新，向用戶展示。
     • 將原生使用原生程式碼實現的UI小部件包裝成React Native的自定義元件
       
       • React Native支援將Widget（官方、第三方開源、開發者自行開發）包裝成React Native的自定義元件，然後在React Native程式碼中方便的使用。
     • 應用介面在React Native開發的介面與原生程式碼開發的介面間切換
       
       • 在已用原生程式碼開發好的專案中加入一些用React Native 開發的新介面，混合開可以做到讓應用介面流暢自如地在這兩種介面間切換，使用者對此不會有任何的感知。

3. 高效的UI開發

   使用React Native開發移動應用的UI介面比使用原生語言快捷高效，再考慮到至少90%的移動介面都可以使用React Native開發，一分程式碼適配android和iOS兩個平臺，這相當於減掉了一個開發平臺上至少50%的工作量。

   React Native可以實現很多UI之外的功能，但開發UI部分絕對是React Native的強項，這體現在如下四個方面：

   • 獨特的UI實現框架
   • 複雜UI介面開發難點的本質問題就是：如何將來自網路側與使用者側的動態資料高效、實時、正確地呈現在複雜的使用者介面上。 FaceBook的React框架是這個問題的一個優秀解決方案。React Native官網描述它的出發點為：用於開發資料不斷變化的大型應用程式。相比傳統的UI開發，React開闢了一個相當另類的途徑，實現了UI介面的高效率、高效能開發。使用React開發，開發者永遠只需要關心資料。當資料改變時，開發者只需要告訴React資料變了，有React來實現UI介面的改變。
   • 元件化開發

   • React 推薦已元件的方式去重新思考UI構成，將UI上每個功能相對獨立的模組定義成元件，然後將小的元件通過組合或者巢狀的方式構成大的元件，最終完成整體的UI的構建。

     React強調將應用劃分成多個互不相關的元件，每個元件作為獨立的檢視。這使得開發者更容易進行軟體迭代升級，因為不用在改動某一小部分時把整個系統都梳理一遍。最重要的的是，React包裝了複雜而易變的資料到物件的實現，改為提供一個宣告式的結構，使得整個程式模型變得抽象而簡單。使用React來構建網頁或者手機UI時，程式碼變的更容易預測。這種可預測性使得開發者在快速迭代產品時可以更多地信任已有的程式碼，最終應用程式也變得更為可靠。更進一步的，React框架不僅僅使擴大應用規模變得容易，也使得團隊規模更容易進行調整。
     這樣開發出來的程式碼結構清晰、公用性高、可移植性高。上一個專案的某些元件，可以很方便的拿來在下一個專案中使用；好的開源元件，可以下載後很方便地整合在我們的專案中使用。

   • 跨平臺移植程式碼迅速

   • >使用React Native進行UI開發時，開發者通常在一個平臺上開發，然後用這一套程式碼去另一個作業系統中進行修正。通常需要修正的程式碼只有總程式碼的5%甚至更低。
   • 自動匹配不同螢幕大小的手機
   • 使用React Native開發，開發者無須為不同螢幕解析度準備不同的圖片資源或者佈局檔案，甚至可以不考慮螢幕大小的問題。通過靈活的佈局方式，React Native可以做到在不同的手機螢幕上高效、清晰的UI呈現。

4. 高效的UI除錯

   使用React Native開發，修改了程式碼後立刻可以在手機上看到效果，沒有重新編譯啟動程式所需要的時間。並且可以開啟一個Chrome視窗，所有的程式碼都移植到Chrome裡面執行，斷點除錯、單步除錯、呼叫棧追蹤這些常用的除錯方法都可以進行操作。

5. 學習門檻低、開發難度低

   • 開發語言簡單
     
     • React Native使用ECMAScript 2015語言（簡稱ES 6）以及自創的JSX（JavaScript中加入標籤化的XML）來進行開發。對於沒有JavaScript知識背景的移動開發人員，只需要花時間熟悉JavaScript的基本語法後就可以使用React Native進行開發。
   • 語法接近自然語言
     
     • React Native開發中的函式名、變數名都採用類似於自然語言的命名法，便於記憶。這種程式碼語句的基本含義基本可以直接推斷和理解。
   • 積木式UI開發
     
     • 使用React Native開發時，是一種類似於搭積木的方式。不論是設計還是實現，通過React Native框架都能做到邏輯結構清晰、開發難度低、可讀性高、後期維護方便。

6. 開發軟硬體要求低

   使用ReactNative開發對軟硬體要求低，RN開發用的軟體都是可免費下載、安裝使用的正版軟體，部分是開源軟體。

7. 使用React Native開發的代價

   • 記憶體消耗略大
     
     • 使用React Native 開發的程式執行所需記憶體比原生程式碼開發的程式略多。
   • 執行速度
     
     • 使用React Native開發的程式碼的執行速度比原生程式碼略慢。
   • 安裝包比原生程式碼安裝包大
     
     • 使用React Native開發的程式體積比原生程式碼大。無論是安裝包的大小，還是安裝後需要的空間都比原生程式碼編寫的程式大。

8.使用RN開發的優點

• 1、元件化開發，複用率高，元件豐富以後，UI開發較快，前端式開發。
• 2、同時支援Android和iOS的UI介面。
• 3、可以方便的進行程式碼熱更新。
• 4、Learn once,write anywhere，未來js可能會有更大的通用性，比如現在微信小程式的開發技術和React Native十分相似。現在還有用React Native開發mac桌面應用，開發web網頁。
• 5、可以和原生頁面互相呼叫，作為一部分嵌入到一個已有的原生app中。它是一種介於在webview和原生開發之間的解決方案，它想要實現像web一樣靈活，像原生一樣的效能，雖然現在還都沒有達到，但是它是一種有可能接近這個目標的解決方案。

9.使用RN開發的缺點

• 1、由於還不是穩定版本，版本更新太快，大概兩週會有一個新的版本。更新新 版可能會出現不相容的問題，有時候需要手動解決。
• 2、支援的元件不全面。大部分廠商並不支援react native。一些支援的現在一般也處在不穩定版本。比如截止到rn版本0.42，js版的本地資料庫元件只有realm支援，現在realm版本為3.1.0。相比較realm資料庫現在是越來越穩定了。
• 3、程式的效能。現在普遍都說比原生的效能要差，但是差多少沒有一個具體的衡量。直觀的感覺是複雜的頁面在一些配置較低的手機上會有肉眼可見卡頓的感覺。
• 4、雖然大多介面可以同時生成ios和android的，但一些涉及到底層的東西需要在ios和android單獨開發，然後在js層進行呼叫。
• 5、關於react native的開發現在並沒有一些best practice，也沒有真正很有經驗的人，很多隻能摸索。對於小團隊來說，試錯成本有點高，一旦卡在一些問題上，網上解決方案很少，容易耽誤了整體的進度。

關於RN的概念就說這麼多了，我想你看完之後一定會對React Native有一個更好的認識了，接下來我會根據我自己學習RN之路的收穫和遇到的困難來寫更多的部落格。
如果你想了解更多歡迎加入我們一起學React Native 群
來一起學習吧