Zi 字媒體

二、常見的五種App開發模式常見的開發模式有5種（Native App,Web App,Hybrid App,Weex,React Native）Native AppNative App:指使用原生API開發App,比如iOS用OC語言開發優點：性能高缺點：開發維護成本高，養一個原生開發工程師需要很多錢，最重要iOS版本更新也成問題。Web AppWeb App:指使用Html開發的移動端網頁App,類似微信小程序，整個App都是網頁。優點：用戶不需要安裝，不會佔用手機內存缺點：用戶體驗不好，不能離線，必須聯網Hybrid AppHybrid App:混合開發模式，原生Api+Html共同開發，比如iOS,用html寫好界面，用UIWebView展示。優點:界面復用性強，一個界面，iOS和安卓都可以使用缺點:相對於原生，性能相對有所損害WeexWeex:基於Vue(JS框架)的語法開發的App,底層會自動把JS代碼解析成對應平台(iOS,安卓)的原生API，本質還是原生API開發，只不過表面是用Vue開發。優點:可以做到一套代碼，跨平台執行，底層會自動判斷當前是哪個平台，轉換為對應平台的原生API代碼。缺點：開源較晚，互聯網上相關資料還比較少，社區規模較小React NativeReact Native:基於React開發的App優點：跳過App Store審核，遠程更新代碼，提高迭代頻率和效率，既有Native的體驗，又保留React的開發效率。缺點:對於不熟悉前端開發的人員上手比較慢，不能真正意義上做到跨平台，使用后，對app體積增加。相信大多數人了解完React Native，越來越困惑了，那不是跟Native衝突了嗎，Native是用原生Api開發,但是React Native又是用React開發。要想徹底搞明白，需要了解React Native底層實現原理，又來了，想知道原理，繼續往下看三、React Native原理React Native原理其實跟Weex差不多，底層也會把React轉換為原生APIReact Native和Weex區別在於跨平台上面，Weex只要寫一套代碼，React Native需要iOS,安卓都寫，說明React Native底層解析原生API是分開實現的，iOS一套，安卓一套。四、React Native如何把React轉化為原生APIReact Native會在一開始生成OC模塊表，然後把這個模塊表傳入JS中，JS參照模塊表，就能間接調用OC的代碼。 相當於買了一個機器人（OC），對應一份說明書（模塊表），用戶（JS）參照說明書去執行機器人的操作。五、React Native是如何做到JS和OC交互iOS原生API有個JavaScriptCore框架，通過它就能實現JS和OC交互，想了解JavaScriptCore，請點擊JavaScriptCore 1.首先寫好JSX代碼（React框架就是使用JSX語法） 2.把JSX代碼解析成javaScript代碼 3.OC讀取JS文件 4.把javaScript代碼讀取出來，利用JavaScriptCore執行 5.javaScript代碼返回一個數組，數組中會描述OC對象，OC對象的屬性，OC對象所需要執行的方法，這樣就能讓這個對象設置屬性，並且調用方法。JS和OC交互.png六、React Native啟動流程(iOS)1.創建RCTRootView -> 設置窗口根控制器的View,把RN的View添加到窗口上顯示。2.創建RCTBridge -> 橋接對象,管理JS和OC交互，做中轉左右。3.創建RCTBatchedBridge -> 批量橋架對象，JS和OC交互具體實現都在這個類中。4.執行[RCTBatchedBridge loadSource] -> 載入JS源碼5.執行[RCTBatchedBridge initModulesWithDispatchGroup] -> 創建OC模塊表6.執行[RCTJSCExecutor injectJSONText] -> 往JS中插入OC模塊表7.執行完JS代碼，回調OC，調用OC中的組件8.完成UI渲染React Native啟動流程(iOS).png七、React Native載入JS源碼流程(iOS)1.[RCTJavaScriptLoader loadBundleAtURL] -> 載入遠程伺服器中JS代碼2.attemptAsynchronousLoadOfBundleAtURL(C函數) -> 開啟非同步載入JS代碼3.[RCTBatchedBridge executeSourceCode:sourceCode] -> 讓批量交接對象執行源代碼[RCTJSCExecutor executeApplicationScript] -> 交給JS執行者（RCTJSCExecutor）執行源碼)真正執行JS代碼的是RCTJSCExecutor對象5.[postNotificationName:RCTJavaScriptDidLoadNotification] -> 發送JS代碼執行完成通知6.RCTRootView監聽到RCTJavaScriptDidLoadNotification通知7.創建RCTRootContentView8.獲取RCTBridge中的RCTUIManager註冊RCTRootView,並且記錄RCTRootView，_viewRegistry