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

寫在前面

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

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（推薦使用紙質書來學習）
• 為了方便在手機上查看，后面我會把這些筆記陸續發布到公眾號“派三派四”，可以掃碼關注一下，歡迎關注，
  

標籤：JavaScript

上一篇：通過命令列和圖形界面工具介紹Git的安裝、倉庫創建、作業流、遠程倉庫、克隆倉庫、標簽管理和分支管理

下一篇：vue中使用帶隱藏文本資訊的圖片、圖片水印