[書籍精讀]《React Native精解與實戰》精讀筆記分享

寫在前面

• 書籍介紹：本書由架構師撰寫，包含ReactNative框架底層原理，以及與iOS、Android混合開發案例，精選了大量實例代碼，方便讀者快速學習。主要內容分爲兩大部分，第1部分“入門”包括第1_{9章，介紹ReactNative框架的基本原理與使用方法；第2部分“進階”包括第10}15章，介紹ReactNative框架的高階開發與App部署相關知識。附錄部分剖析了ReactNative的源碼，可幫助讀者研究ReactNative底層本質，還分享了一些ReactNative框架學習的相關資源。
• 我的簡評：我是去年年底纔開始學習使用React和React Native進行開發的，之前用的都是Vue的技術棧。這本書給我的感受就是邏輯清晰，通俗易懂，從基礎入門到原理進階，一一道來。但我想如果作者能再附帶一個完整的項目實戰可能效果更好，不過作者ParryQiu本人也寫過很多技術教程以及錄製了幾套視頻教程，有興趣的可以去他個人的技術博客看看。
• ！！福利：文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址。覺得有用，記得點贊或收藏哦！
  

1.React Native簡介

React簡介

• 最早孵化於Facebook內部
• Jordan Walke是框架的創始人
• 底層核心是Virtual DOM

React Native簡介

• 在React框架的基礎之上
• 底層通過對IOS平臺和Android平臺原生代碼的封裝與調用
• JavaScript Core底層

React Native學前知識

• HTML5的基礎知識
• CSS佈局的基本知識
• JavaScript的基礎知識
• Ios和Android兩個平臺的App打包、部署與上線
• Node.js以及npm包管理的知識

2.開發環境配置

• 安裝nodejs
• 安裝React Native
• 編輯器Vscode

推薦插件

• React Native Tools
• react-beautify

3.React Native工作原理與生命週期

3.1.框架工作原理

• JSX源碼通過React Native框架編譯後，通過對應平臺的Bridge實現了與原生框架的通信
• UI層變更就映射爲虛擬DOM後調用diff算法計算出變動後的JSON映射文件，最終由Native層將此JSON文件映射渲染到原生App的頁面元素上，實現了項目中只需控制state以及props的變更來引起IOS與Android平臺的UI變更

3.2.與原生平臺通信

• 與原生框架通信中，採用了JavaScriptCore作爲JS VM，中間通過JSON文件與Bridge進行通信
• Chrome瀏覽器進行調試，那麼所有的JavaScript代碼都將運行在Chrome的V8引擎中，與原生代碼通過WebSocket進行通信

3.3.組件間通信

• 父子組件通信：props
• 子父組件通信：傳入函數
• 多級組件之間的通信：context對象或global等方式
• 無直接關係組件間通信：AsyncStorage或JSON文件，EventEmitter/EventTarget/EventDispatcher繼承或實現的接口，Signals模式，Publish/Suubscribe廣播形式

3.4.React Native生命週期

• 初始化階段：constructor
• 加載階段：componentWillMount、render、componentDidMount
• 更新階段：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate
• 卸載階段：componentWillUnmount

4.React Native頁面佈局

4.1.CSS3

• 選擇器、2D/3D轉換、盒子模型、動畫、背景和邊框、多列布局、文字特效、用戶界面
• 引入新的模塊：Flex佈局，通俗稱爲彈性盒模型。爲了更加有效的去佈局、對其元素

4.2.Flex彈性盒模型

• 元素以兩個座標方向進行佈局，分別稱爲主軸和交叉軸
• 元素都存在於Flex容器中
• 以Flex Container的起始與結束作爲座標的起始與結束點
• 可以自動伸縮，默認可以填充剩餘的空間

4.3.Flex詳解

• justify-content
• align-items
• align-self
• flex-direction
• flex-basis
• flex-wrap
• align-content
• flex-grow
• flex-shrink
• order
• flex-flow
• flex

4.4.React Native中Flex

• 因爲在React Native框架中直接使用JavaScript來實現屬性的定義，所以所有屬性都按照React Native中定義的寫法來寫，只是屬性名稱部分有連接符的，在React Native中變成了駝峯拼寫的形式，並且某些屬性的默認值進行了變更，但是本質的原理與作用是不變的

5.React Native開發調試技巧與工具

5.2.常用調試屬性（開發者菜單）

• 重新加載刷新應用
• 啓動實時重新加載刷新
• 啓用調試跟蹤
• 啓用熱加載
• 顯示審查元素工具
• 顯示性能監控工具

5.3.Chrome中遠程調試

• 在 React Native 開發調試時，打開模擬器或真機設備上的開發者菜單，選擇“ Debug JS Remotely ”後，本地的 Chrome 瀏覽器會自動打開一個 tab，URL 地址
  爲 http://localhost:8081/debugger-ui

5.4.React Developer Tools工具

• 樹形結構查看
• 源碼搜索
• 邊欄工具

6.React Native組件詳解

6.1.組件簡介

• 提供一系列的內置組件供開發者使用
• 依託開源社區強大的生態系統，更有無窮無盡的開發組件可供使用

6.2.視圖組件View

• 用於佈局的基礎組件是View組件，其他所有的組件都可以佈局在View組件中，類似網頁佈局中的div
• 支持Flex CSS屬性，還支持React Native中的樣式、一些觸摸事件以及一些可訪問性的屬性設置
• View組件對應iOS平臺的UIView，Android平臺的Android.view以及HTML中的div

6.3.底部導航組件TabBar

• iOS平臺下的TabBarIOS
• Android平臺沒有官方提供的TabBar組件，推薦使用開源組件react-native-tab-navigator

6.4.頁面跳轉組件

• iOS平臺下的NavigatorIOS
• Android沒有官方的頁面導航組件，推薦使用react-native-navigation

6.5.圖片組件Image

• 提供多種方式加載圖片資源，如加載網絡圖片、靜態資源、本地圖片、或讀取用戶相冊中的圖片
• Android平臺下還可以支持GIF和WebP圖片格式，iOS平臺上支持psd
• 在iOS平臺下，加載的資源必須是HTTPS協議資源

6.6.文本組件Text

• React Native中不可以直接將文字放置在View組件之下
• 可以進行文字的嵌套處理
• React Native沒有直接定義元素級別樣式的能力，所以不能讓所有的Text等組件直接通過繼承的方式獲取到統一的樣式定義

6.7.輸入框組件TextInput

• 提供了接受用戶通過鍵盤輸入字符的功能，並可以通過後期的配置實現如自動糾錯、自動大寫、提示文字以及顯示不同的鍵盤類型如郵件、數字等功能

6.8.觸摸處理類組件TouchableHighlight

• 在組件被點擊時使用自定義的背景顏色進行高亮顯示，以便在某些使用場景下讓用戶更能明確地感應到對應的操作
• 但只能包裹在一個層級的子元素上，如果有多個，那麼就需要使用一個View組件將所有的元素包裹起來，再放置在TouchableHighlight組件下

6.9.網頁WebView組件

• App中有些頁面組件是經常變動的，如用戶幫助等，或者加載一個別人提供的頁面

6.10.滾動視圖組件ScrollView

• ScrollView在指定了固定的高度之後即可以工作，用於生成一個可滾動的視圖
• 但它會一次將所有的子元素渲染出來，數據量多的時候渲染效率肯定比較低下
• React Native提供另一個組件FlatList用於改進這個組件的性能問題，會進行延遲渲染

7.React Native API詳解

7.1.API簡介

• React Native不僅爲開發人員提供了大量用於App開發佈局的組件，還提供了用於供開發人員調用的更加接近原生組件與功能的模塊

7.2.提示框Alert

• 用於提示用戶的信息彈出框
• 如果在彈出提示框的同時需要用戶輸入一些信息，那麼在iOS平臺下就需要調用AlertIOS API

7.3.App運行狀態AppState

• 通過AppState可以獲取到當前App是在前臺運行還是在後臺運行
• AppState共有三種狀態：active（正在前臺運行），background（在後臺運行），inactive（前後臺切換的一個短暫狀態）

7.4.異步存儲AsyncStorage

• 爲開發者提供了一個異步的、未加密、持久的、全局的鍵值對（key-Value）存儲模塊，如同HTML5中的LocalStorage
• IOS平臺會使用原生代碼將AsyncStorage中的小數據存儲於序列化的字典數據結構中，而將大數據存儲在單獨的文件中
• Android平臺會將AsyncStorage存儲於RocksDB或SQLite中，取決於哪一個模塊是可用的
• AsyncStorage是明文存儲的。所以在iOS系統下，推薦將用戶敏感信息存儲在iOS的Keychain中，而在Android下，需要將用戶敏感信息存儲在SharedPreferences
• iOS已有組件react-native-keychain，Android有react-native-sensitive-info組件

7.5.相機與相冊API

• React Native框架中，API提供了CameraRoll供用戶訪問本地相冊的功能，而在iOS系統中使用此功能時，還需要先鏈接RCTCameraRoll庫
• 在App的開發過程中，一般在爲用戶提供讀取相冊的功能時，還應該給用戶提供一個直接相機拍照的功能。所以在開發過程中會直接使用集成了讀取相冊以及使用相機拍照二合一的功能組件
• 開源組件React Native Image Picker提供了使用原生UI從設備相冊中選取圖片或者視頻的功能，或者直接使用相機進行拍攝讀取

7.6.地理位置信息Geolocation

• 爲App提供獲取定位座標的功能

7.7.設備網絡信息NetInfo

• 獲取App當前網絡狀態的功能API
• 使用場景：通過網絡的不同狀態加載不同的資源，以便提高用戶加載資源的速度，或者保存網絡狀態以便判斷用戶使用場景的變化
• iOS系統設備狀態：none、wifi、cell、unknown

8.React Native 網絡請求詳解

8.1.Restful API簡介

• REST指的是一組架構約束條件和原則

8.2.React Native中的網絡請求

• 提供了Fetch API作爲網絡請求之用
• 現在產生的Fetch框架就是爲了提供更加強大、高效的網絡請求而生額。在Chrome瀏覽器中已經支持了Fetch函數
• Fetch支持了大部分常用的HTTP的請求並和HTTP標準兼容

8.3.ListView組件

• 在通過Fetch API獲取數據後，一般會使用React Native中的ListView組件進行數據的綁定操作

9.常用React Native開源組件詳解

9.1.React Native熱門資源列表

• github地址：awesome-react-native

9.2.React Native接入微博、微信、QQ登錄

• 使用的組件是react-native-open-share

9.3.更加美觀的組件庫

• react-virgin

9.4.React Native 圖表

• react-native-pathjs-charts，基於react-native-svg與paths-js

9.5.react-native-gifted-listview

• 提供了iOS平臺下的下拉刷新與Android平臺下的點擊刷新，以及列表底部加載更多組件功能。還提供了加載進度條、列表無數據時的默認視圖、列表頁頭標題等功能

9.6.react-native-vector-icons

• 提供了幾千個圖標，而且這些圖標都是開源的

10.React Native運行原理與部署調試

10.1.React Native運行原理

• 框架運行起來所依賴的幾大組成部分：硬件設備或者模擬器，用於運行原生代碼；Node.js服務端，也就是React Native Packger，負責源碼的打包工作；Google Chrome，可以提供中間態的調試工具；後臺的React Native JavaScript代碼；
• React Native Packger實現原理：當我們在啓動iOS或Android項目時，React Native框架會自動啓動React Native Packager控制檯來進行監聽和打包，而手動啓動的方法爲在項目文件夾下運行命令npm start即可

10.2.iOS平臺部署於調試

• 運行App到模擬器上：react-native run-ios --simulator="iPhone X"
• 運行App到真機上：1、連接真機設備；2、配置代碼簽名；3、啓用iOS應用的ATS（App Transport Security）；4、配置發佈模式；5、將資源文件靜態化打包；6、編譯發佈運行；

10.3.Android平臺部署與調試

• 連接Android設備
• Android離線JavaScript資源的打包
• 在真機上運行App
• Gradle：基於Apache Ant和Apache Maven概念的項目自動化工具。特點：自動處理包相依關係-取自Maven Repos的概念；自動處理部署問題-取自Ant的概念；條件判斷寫法直覺-使用Groovy語言；

10.4.Android模擬器介紹

• Android Studio下自帶Android模擬器
• 另一款模擬器Genymition可以模擬3000+的Android設備

11.IOS開發與React Native混合開發

11.1.iOS平臺混合開發簡介

• 有時React Native框架還沒有提供對應的JavaScript Api，就需要自己編寫React Native框架與iOS平臺結合的混合開發代碼，使得React Native框架可以直接與iOS平臺的原生代碼進行通信

11.2.iOS平臺混合開發原理詳解

• 實現過程：1.在iOS平臺的原生代碼中定義混合開發的入口，用於與React Native中的JavaScript代碼進行通信；2.設置iOS平臺下項目的編譯必備設置；3.在React Native項目中通過JavaScript代碼調用混合開發實現的iOS平臺原生功能；
• 開發特性：參數類型；回調函數；Promise；多線程；依賴注入；導出常量；枚舉常量；發送事件到JavaScript；優化無監聽處理的事件；Swift的實現方法；

12.Android平臺與React Native混合開發

12.1.Android平臺混合開發簡介

• 混合開發可以利用現有的Android原生平臺的代碼，並可以用於開發一些需求高性能、多線程的應用場景

12.2.Android平臺混合開發原理詳解

• 開發步驟：1.在Android項目中通過原生代碼實現提供給React Native調用的原生功能；2.在Android項目中將編寫好的功能模塊進行註冊；3.定義功能模塊的Android包；4.在React Native項目中通過JavaScript代碼調用混合開發實現的Android平臺原生功能；
• 開發特性：回調；Promise；發送事件到JavaScript；從StartActivityForResult中獲取結果；監聽生命週期事件；

13.React Native消息推送

13.1.iOS平臺消息推送機制

• 所有的iOS設備的消息推送都會經過Apple的消息推送服務器Apple Push Notification service（APNs），所有的推送消息由此服務器進行消息的下發
• 向APNs發送請求的服務器需要配置Apple開發者賬號下的證書
• APNs發現目標設備離線後，會先將請求的消息存儲起來，等設備上線後再進行消息的推送
• iOS平臺的原生消息推送設置非常複雜，需要手動設置消息推送的開發者賬號證書、推送消息請求的服務器證書、環境、編寫以及APNs交互的代碼
• iOS平臺第三方消息推送框架會將開發的流程簡單化，我們只需要與極光平臺通過JPush API進行通信，JPush API提供了APNs Sender與Apple APNs Server進行通信，後續APNs與設備的通信與原生消息推送通信的過程一致，由APNs負責即可，前部分由極光平臺代理
• JPush還提供了應用內消息推送部分，即App啓動時，內嵌的JPush SDK會開啓長連接到JPush Server，從而JPush Server 可以推送消息到App裏

13.2.Android平臺消息推送機制

• Android環境下的消息推送方案：輪詢（Pull）方式；長連接（Push）方式；使用XMPP、MQTT實現消息推送；
• 綜合考慮，使用長連接（Push）方式在實現簡易度以及資源損耗方面可以找到一個比較好的平衡點
• Android平臺第三方通過開發者集成JPush Android SDK到其應用中，JPush Android SDK創建到JPush Cloud的長連接，爲App提供永遠在線的能力，當推送消息到達App時，只需要調用JPush API推送即可

13.3.React Native極光推送實戰

• jpush-react-native
• 需要注意Android的應用包名與iOS App的Bundle ID最好保持一致

14.IOS、Android平臺發佈與熱更新

14.2.快速生成平臺App圖標與啓動圖的方法

• Ape Tools
• makeappicon.com

14.3.iOS打包上架

• 需要使用XCode進行打包，打包後的App可以直接通過XCode提交到App Store供Apple審覈

14.4.Android打包上架

• App打包開放得多，通過Android Studio工具打包後可以直接生成單獨的、可任意複製分發的Apk文件，用戶只需要下載apk文件即可在自己的真機上安裝

14.5.ReactNative熱更新

• 用戶可以在不更新App的情況下進行App的熱更新，甚至支持增量熱更新，服務器只需要給用戶下發新增的代碼與資源文件，React Native框架會自動進行JS Bundle文件的合併，App在重新加載了JS Bundle後，App的功能和內容也進行了更新 16
• React Native框架會將我們開發的所有JavaScript代碼，包括React Native框架代碼、第三方組件代碼、業務邏輯代碼、圖片等資源都打包在一個JS Bundle文件中，React Native App運行時會加載這個JS Bundle文件
• CodePush是微軟推出的用於Cordova框架與React Native框架App熱更新的框架，我們可以直接通過調用CodePush的SDK來快速、穩定的實現App的熱更新功能
• 我們通過CodePush的CLI將更新的代碼包以及相關資源文件按照CodePush的格式打包後提交到CodePush雲平臺，用戶的設備會請求CodePush的服務器詢問是否有文件更新

15.React Native 性能調試方法與技巧

15.1.性能調優基準參數

• RAM 內存佔用
• JSC JavaScript堆內存佔用
• Views 當前屏幕中所有的view數量
• UI FPS(幀率)
• JS JavaScript幀率

15.2.常見造成App性能低下的原因

• 1.console.log語句
• 2.Navigator性能問題
• 3.Touchable類組件使用問題
• 4.改變圖片大小導致掉幀問題
• 5.改變視圖時導致丟幀問題
• 6.ListView組件性能問題
• 7.在重繪一個沒有改變的視圖JS的FPS突然下降
• 8.JavaScript線程繁忙時導致JS線程掉幀

15.3.查找性能問題以及調優方法

• XCode的性能測試工具Instruments
• Android原生的性能統計工具systrace

15.4.性能優化方法與組件

• 1.性能優化原則：最核心就是儘量減少通過bridge的通信內容
• 2.使用特定平臺組件：使用特定平臺的組件開發特定平臺的功能，如NavigatorIOS、TabBarIOS等
• 3.高性能第三方組件：react-native-fast-image；react-native-largelist；react-native-display；react-native-swipeview；react-native-interactable；
• 4.資源優化：React Native最終會將所有的資源文件打包成一個Bundle文件；控制Bundle的尺寸大小；除tab圖標外其他的圖片資源文件可以通過網絡加載的方式進行加載，或者從圖片CDN上加載；Bundle文件還可以進行拆分，讓資源文件按需加載；

寫在後面

• pdf書籍、筆記思維導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/1ZJz711DrCfGRkqdlkx_HZg(提取碼：b4yg)
• 紙質書京東購買地址：https://u.jd.com/OuBeOf（推薦使用紙質書來學習）
• 爲了方便在手機上查看，後面我會把這些筆記陸續發佈到公衆號“派三派四”，可以掃碼關注一下，歡迎關注。