RN Native 框架原理學習（一）

1、React Native 的大致結構

一、一圖勝千言，咱們看一個總體框架圖

如上圖，React Native的跨平臺主要由三層構成，其中C++做爲中間設配層橋接，從而實現JS和Native的雙向通信。

• Js層：處理事件分發及UI Layout，日常開發最經常使用的。通用jsx來寫業務代碼，經過flexbox來實現佈局。
• C++層：c++層最主要是封裝了JavaScriptCore，它是一個全新的支持ES6的webKit。解析js文件是經過JSCExectutor進行的，Bridge鏈接了java與js之間的通訊。
• Java層：java層就是app原生代碼，C++層的javascript解析器javascriptCore來執行js代碼，從而構建原生UI等。java層依賴於衆多優秀開源庫，在圖片處理使用的是Fresco，網絡通訊使用的是okhttp，在java層原生的功能均封裝爲Module，如Toast和Log等。

其實RN總體框架的目的就爲了讓Native端能夠解析，執行JS腳本

二、相關概念 WebKit、JavaScriptCore、V8

一、WebKit

WebKit是一個開源瀏覽器引擎（Safari、Chrome等使用）、相似的還有Gecko（Mozilla Firefox 等使用）和Trident（IE 使用）

其中的JavaScript引擎，負責javaScript的解釋、編譯、執行。 各家重寫了這部分，實現本身的JS引擎，例如Google的 V8引擎。

二、JavaScriptCore

JavaScriptCore是webKit中默認的JS引擎，Google使用V8代替JavaScriptCore做爲其chromium的JS引擎（Node.js的引擎也是V8）。 在RN框架中，IOS上直接使用內置的javascriptcore、Android中使用的是jsc.so。 而Weex使用的則是V8引擎；

2、實現原理

• UI層 View： react native中全部的標籤都不是真實控件，Js代碼中所寫的控件，都做爲一種Map中的Key值。JS端經過這個Key組合的Dom，放到Virtual Dom這個虛擬的JS數據結構中，而後經過JSBridge傳遞到Native，Native端會解析這個Dom，從而獲得對應的Native控件。好比JS中的 ，在Android對應爲ViewGroup， 對應TextView

  

• API Module： 原生端提供的各類Module模塊參數，包括ModuleID、MethodID、Params，和JS端提供的各類Module模塊參數，都會在C++層的Bridge 中註冊。 Js/Java 調用的ModuleID、MethodID、Params，經過Birdge映射，轉換成Java/Js對應的ModuleID、MethodID、Params，實現兩端方法的互調。通訊的數據和指令，在中間層會專成Json傳輸。

  

• 消息循環、線程模型： React Native 爲JS引擎建立了一個獨立的線程，在Android上主要由三個線程，每一個線程都由與其綁定的消息隊列

  • UI線程：即Android中的主線程，負責繪製UI以及監聽用戶操做。
  • Native線程：負責執行C++代碼，該線程主要負責Java與C++的通訊。
  • JS線程：負責解釋執行JS。

  三個線程的交互主要藉助Android 的Handler來完成。

3、參考文章

• zjutkz.net/2016/05/03/…
• blog.csdn.net/u014486880/…
• www.jianshu.com/p/02be425d7…
• juejin.im/post/5c0a3e…