- 別名：手把手教你學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。這個完全脫離了原生的元件，對一些效果有很好的控制。原理圖如下：
學過Android，ionic，RN後，對如何入門一個移動端開發技術有些心得，個人覺得步驟如下：
- 環境配置
- 新建專案和除錯工具
- 入口檔案
- 資料和事件繫結
- 佈局和樣式
- 介面跳轉
- 生命週期
- 網路請求
- 資料儲存
- 許可權設定
- 主題風格
- 事件廣播
- 適配
- 打包
其他的都是些元件使用等細節或者是更高階的用法了。
再扯回來，所有的元件中我覺得最需要花心思的就是List類元件了，兩個原因，一個是大量資料下如何維持效能，保持順滑，另一個提供擴充能力滿足各種設計。我們現在常用的軟體，很多都是資訊流的，必然要用到List。RN先是提供了ListView，後來升級為FlatList，是明智之舉。可以這麼說，沒有高效能可擴充List元件的框架不是好框架。
以前沒寫過React程式碼，第一次接觸RN寫介面的時候都懵了，居然還可以這樣，JSX還真是個有意思的東西。RN中我覺得一個亮點就是實現了flex佈局，這個真心是好用啊，讓我想起類當年寫Android佈局的痛苦歲月，谷歌不整這麼一套真的說不過去。
RN中的狀態機思維讓我一度陷入拆分元件的痛苦中，在寫程式碼高仿知乎我的這一介面時，拆的我都有點兒崩潰，時時刻刻想把大的元件拆分成小的只負責渲染資料的無狀態RN元件。用了React-Redux後，我覺它和RN真的是天作之合啊，還專門花了時間弄清楚他的原理，具體見一幅圖明白React-Redux型原理，搞明白之後才發現，真的是框架處處皆釋出訂閱模式。
這本書不推薦購買，初學者圖書館借一本，照著裡面程式碼寫一遍，RN基本上就是入門了。具體專案遇到什麼坑，Google一下還是很容易就解決的。