[書籍精讀]《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到真機上：一、鏈接真機設備；二、配置代碼簽名；三、啓用iOS應用的ATS（App Transport Security）；四、配置發佈模式；五、將資源文件靜態化打包；六、編譯發佈運行；

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（推薦使用紙質書來學習）
• 爲了方便在手機上查看，後面我會把這些筆記陸續發佈到公衆號「派三派四」，能夠掃碼關注一下，歡迎關注。