一.RN工作原理
RN 這套框架讓 JS開(kāi)發(fā)者可以大部分使用JS代碼就可以構(gòu)建一個(gè)跨平臺(tái)APP黍氮。 Facebook官方說(shuō)法是learn once, run everywhere脑慧， 即在Android 、 IOS、 Browser各個(gè)平臺(tái)贬媒，程序畫(huà)UI和寫(xiě)邏輯的方式都大致相同。因?yàn)镴S 可以動(dòng)態(tài)加載，從而理論上可以做到write once, run everywhere灾部， 當(dāng)然要做額外的適配處理。如圖：
RN需要一個(gè)JS的運(yùn)行環(huán)境惯退， 在IOS上直接使用內(nèi)置的javascriptcore赌髓， 在Android 則使用webkit.org官方開(kāi)源的jsc.so。 此外還集成了其他開(kāi)源組件蒸痹，如fresco圖片組件春弥，okhttp網(wǎng)絡(luò)組件等。
RN 會(huì)把應(yīng)用的JS代碼（包括依賴的framework）編譯成一個(gè)js文件（一般命名為index.android.bundle), , RN的整體框架目標(biāo)就是為了解釋運(yùn)行這個(gè)js 腳本文件叠荠，如果是js 擴(kuò)展的API匿沛， 則直接通過(guò)bridge調(diào)用native方法; 如果是UI界面， 則映射到virtual DOM這個(gè)虛擬的JS數(shù)據(jù)結(jié)構(gòu)中榛鼎，通過(guò)bridge 傳遞到native 逃呼， 然后根據(jù)數(shù)據(jù)屬性設(shè)置各個(gè)對(duì)應(yīng)的真實(shí)native的View。 bridge是一種JS 和 JAVA代碼通信的機(jī)制者娱， 用bridge函數(shù)傳入對(duì)方module 和 method即可得到異步回調(diào)的結(jié)果抡笼。
對(duì)于JS開(kāi)發(fā)者來(lái)說(shuō)， 畫(huà)UI只需要畫(huà)到virtual DOM 中黄鳍，不需要特別關(guān)心具體的平臺(tái), 還是原來(lái)的單線程開(kāi)發(fā)推姻，還是原來(lái)HTML 組裝UI（JSX），還是原來(lái)的樣式模型（部分兼容 )框沟。RN的界面處理除了實(shí)現(xiàn)View 增刪改查的接口之外藏古，還自定義一套樣式表達(dá)CSSLayout，這套CSSLayout也是跨平臺(tái)實(shí)現(xiàn)忍燥。 RN 擁有畫(huà)UI的跨平臺(tái)能力拧晕，主要是加入Virtual DOM編程模型，該方法一方面可以照顧到JS開(kāi)發(fā)者在html DOM的部分傳承梅垄， 讓JS 開(kāi)發(fā)者可以用類(lèi)似DOM編程模型就可以開(kāi)發(fā)原生APP 厂捞， 另一方面則可以讓Virtual DOM適配實(shí)現(xiàn)到各個(gè)平臺(tái)，實(shí)現(xiàn)跨平臺(tái)的能力队丝，并且為未來(lái)增加更多的想象空間靡馁， 比如react-cavas, react-openGL。而實(shí)際上react-native也是從react-js演變而來(lái)机久。
對(duì)于 Android 開(kāi)發(fā)者來(lái)說(shuō)奈嘿， RN是一個(gè)普通的安卓程序加上一堆事件響應(yīng)， 事件來(lái)源主要是JS的命令吞加。主要有二個(gè)線程裙犹，UI main thread, JS thread尽狠。 UI thread創(chuàng)建一個(gè)APP的事件循環(huán)后，就掛在looper等待事件 , 事件驅(qū)動(dòng)各自的對(duì)象執(zhí)行命令叶圃。 JS thread 運(yùn)行的腳本相當(dāng)于底層數(shù)據(jù)采集器袄膏， 不斷上傳數(shù)據(jù)，轉(zhuǎn)化成UI 事件掺冠， 通過(guò)bridge轉(zhuǎn)發(fā)到UI thread, 從而改變真實(shí)的View沉馆。 后面再深一層發(fā)現(xiàn)， UI main thread 跟 JS thread更像是CS 模型德崭，JS thread更像服務(wù)端斥黑， UI main thread是客戶端， UI main thread 不斷詢問(wèn)JS thread并且請(qǐng)求數(shù)據(jù)眉厨，如果數(shù)據(jù)有變锌奴，則更新UI界面。
weex工作原理
Weex 表面上是一個(gè)客戶端技術(shù)憾股，但實(shí)際上它串聯(lián)起了從本地開(kāi)發(fā)鹿蜀、云端部署到分發(fā)的整個(gè)鏈路。開(kāi)發(fā)者首先可在本地像編寫(xiě) web 頁(yè)面一樣編寫(xiě)一個(gè) app 的界面服球，然后通過(guò)命令行工具將之編譯成一段 JavaScript 代碼茴恰，生成一個(gè) Weex 的 JS bundle；同時(shí)斩熊，開(kāi)發(fā)者可以將生成的 JS bundle 部署至云端往枣，然后通過(guò)網(wǎng)絡(luò)請(qǐng)求或預(yù)下發(fā)的方式加載至用戶的移動(dòng)應(yīng)用客戶端；在移動(dòng)應(yīng)用客戶端里粉渠，Weex SDK 會(huì)準(zhǔn)備好一個(gè) JavaScript 執(zhí)行環(huán)境分冈，并且在用戶打開(kāi)一個(gè) Weex 頁(yè)面時(shí)在這個(gè)執(zhí)行環(huán)境中執(zhí)行相應(yīng)的 JS bundle，并將執(zhí)行過(guò)程中產(chǎn)生的各種命令發(fā)送到 native 端進(jìn)行界面渲染渣叛、數(shù)據(jù)存儲(chǔ)、網(wǎng)絡(luò)通信盯捌、調(diào)用設(shè)備功能及用戶交互響應(yīng)等功能淳衙；同時(shí)，如果用戶希望使用瀏覽器訪問(wèn)這個(gè)界面饺著，那么他可以在瀏覽器里打開(kāi)一個(gè)相同的 web 頁(yè)面箫攀，這個(gè)頁(yè)面和移動(dòng)應(yīng)用使用相同的頁(yè)面源代碼，但被編譯成適合Web展示的JS Bundle幼衰，通過(guò)瀏覽器里的 JavaScript 引擎及 Weex SDK 運(yùn)行起來(lái)的靴跛。
