《React Native跨平臺移動應用開發》讀後鬼扯

• 別名：手把手教你學React Native
• 評分：3星
• 做者：闕喜濤
• GitHub：https://github.com/es6rn (本書相關代碼主頁，非做者本人的)
• 豆瓣：https://book.douban.com/subject/26809232/

這本書和別名寫的同樣，手把手教你學RN，和不少入門的書籍很類似，按照本書的章節一步一步來，確定對RN的開發會有必定的瞭解。可是它也一本某些內容註定會落伍的書，由於RN還在不斷的更新中，不排除會有破壞性的更新致使某些章節內容在RN最新版下是錯誤的，這個都是廢話。

現實中，Android和iOS兩大移動操做系統平起平坐的局面決定了註定會有相似RN這樣跨平臺移動開發框架的出現,只不過各家實現的思路不一樣而已，以ionic，RN，Flutter爲表明分別扯一下。

ionic算是個人老冤家了，用它作過項目，我還寫了一個入門教程 ionic3-handbook，ionic是基於Angular和Cordova的，它的原理也很簡單，Angular開發打包的js代碼運行在WebView中，經過Cordova插件與Native進行交互，調用原生功能。Cordova的簡化版能夠看是大頭鬼的開源的項目JsBridge，原理同樣，可是前者提供了插件的能力。下圖展現了ionic應用內部運行原理。

除了少部分須要分別針對Android和iOS的適配外，真的是作到了Write once，Run anywhere。有Angular開發經驗的人很容易上手，寫一個簡單的APP賊快。 缺點也很明顯，性能，仍是性能。由於使用了WebView，佔用內存高，性能差。iOS上很流暢，可是在Android中低端機上效果仍是差了點。

RN技術拋開了WebView，利用JavaScriptCore來作橋接，將js調用轉爲native調用。說的再明白一些，RN會把寫的代碼打包成一個js文件，RN這個框架會解釋這個文件，事件的話就經過Bridge調用原生的事件，UI的話就經過Bridge傳遞參數給Native，而後Native渲染出對應的原生組件。具體原理見下圖：

RN相比ionic的性能要好不少，可是它只能作到Learn once，Write anywhere，學習一套語法和工具，能夠開發兩個平臺上的代碼。RN還有一個好處就是熱更新，這個對iOS開發者來講是好事。RN的缺點也很明顯，適配代碼可能須要維護兩套，當沒有開源的組件時，本身實現起來花時間不說，還須要寫原生的開發人員的配合。

Flutter是谷歌推出的跨平臺開發的框架，它既沒有采用WebView也沒有采用JavaScriptCore，而是本身實現了一個UI框架，底層從 RN 這樣橋接原生 UI 組件的方案換成了基於 OpenGL / Vulkan 這樣的圖形庫，直接在系統更底層渲染系統上畫UI。這個徹底脫離了原生的組件，對一些效果有很好的控制。原理圖以下：

Flutter的缺點就是使用了Dart這個語言，使用的人很少，相對ionic和RN來講學習須要成本，另外一個是生態暫時還不成熟，先進去的都是踩坑填坑的壯士，好比說閒魚。

學過Android，ionic，RN後，對如何入門一個移動端開發技術有些心得，我的以爲步驟以下：

• 環境配置
• 新建項目和調試工具
• 入口文件
• 數據和事件綁定
• 佈局和樣式
• 界面跳轉
• 生命週期
• 網絡請求
• 數據存儲
• 權限設置
• 主題風格
• 事件廣播
• 適配
• 打包

其餘的都是些組件使用等細節或者是更高級的用法了。

再扯回來，全部的組件中我以爲最須要花心思的就是List類組件了，兩個緣由，一個是大量數據下如何維持性能，保持順滑，另外一個提供拓展能力知足各類設計。咱們如今經常使用的軟件，不少都是信息流的，必然要用到List。RN先是提供了ListView，後來升級爲FlatList，是明智之舉。能夠這麼說，沒有高性能可拓展List組件的框架不是好框架。

之前沒寫過React代碼，第一次接觸RN寫界面的時候都懵了，竟然還能夠這樣，JSX還真是個有意思的東西。RN中我以爲一個亮點就是實現了flex佈局，這個真心是好用啊，讓我想起類當年寫Android佈局的痛苦歲月，谷歌不整這麼一套真的說不過去。

RN中的狀態機思惟讓我一度陷入拆分組件的痛苦中，在寫代碼高仿知乎個人這一界面時，拆的我都有點兒崩潰，時時刻刻想把大的組件拆分紅小的只負責渲染數據的無狀態RN組件。用了React-Redux後，我覺它和RN真的是天做之合啊，還專門花了時間弄清楚他的原理，具體見一幅圖明白React-Redux型原理，搞明白以後才發現，真的是框架到處皆發佈訂閱模式。

這本書不推薦購買，初學者圖書館借一本，照着裏面代碼寫一遍，RN基本上就是入門了。具體項目遇到什麼坑，Google一下仍是很容易就解決的。