ReactNative原始碼解析-初識原始碼

IFTTT發表於2019-05-12
React原始碼

在開始《ReactNative原始碼解析》系列文章之前，我們先不對原始碼做深入的分析，我們先對原始碼的結構和ReactNative的框架做個簡要的分析和了解，我們將圍繞它的核心進行展開。

1. ReactNative框架是怎樣的？
2. ReactNative框架的核心是什麼，如何去分析？
複製程式碼

好，我們先來看第一個問題。

一、ReactNative框架總覽

ReactNative原始碼結構如下：

ReactNative原始碼解析-初識原始碼

- jni：ReactNative的核心機制都是由C、C++實現的，這部分便是用來載入SO庫。
- perftest：測試配置
- proguard：混淆
- react：ReactNative Java層原始碼部分，我們將對這些原始碼進行重點分析。
- systrace：system trace
- yoga：facebook開源跨平臺的佈局引擎
複製程式碼

ReactNative系統框架圖如下所示：

ReactNative原始碼解析-初識原始碼

二、ReactNative框架的核心

通過對ReactNative系統框架的分析，我們可以發現原始碼的核心如下：

1、ReactNative啟動流程
2、ReactNativeUI渲染
3、ReactNative通訊機制（Java呼叫JS，JS呼叫Java）
4、ReactNative事件處理
5、ReactNative執行緒模型
複製程式碼

後面的文章將按照此順序對ReactNative框架展開深入分析，在分析之前，我們先來理解一下關於ReactNative的重要概念。

三 ReactNative框架的重要概念

1、ReactContext

ReactContext繼承於ContextWrapper，是ReactNative應用的上下文;可以簡單理解它和Android中的Context是一個概念，是整個應用的上下文。
複製程式碼

ReactNative原始碼解析-初識原始碼
從類圖中可以看出繼承關係，有沒有發現和Android中的context繼承關係很像呢？應了那句話，好的設計總是相似的。
2、ReactInstanceManager

ReactInstanceManager是ReactNative應用總的管理類，建立ReactContext、CatalystInstance等類，解析ReactPackage生成對映表，並且配合ReactRootView管理View的建立與生命週期等功能。
複製程式碼

3、CatalystInstance

CatalystInstance是ReactNative應用Java層、C++層、JS層通訊總管理類，總管Java層、JS層核心Module對映表與回撥，三端通訊的入口與橋樑。

複製程式碼

4、NativeToJsBridge/JsToNativeBridge

NativeToJsBridge是Java呼叫JS的橋樑，用來呼叫JS Module，回撥Java。
JsToNativeBridge是JS呼叫Java的橋樑，用來呼叫Java Module。
複製程式碼

5、JavaScriptModule/NativeModule

JavaScriptModule是JS Module，負責JS到Java的對映呼叫格式宣告，由CatalystInstance統一管理。
NativeModule是ava Module，負責Java到Js的對映呼叫格式宣告，由CatalystInstance統一管理。
JavaScriptModule：JS暴露給Java呼叫的API集合，例如：AppRegistry、DeviceEventEmitter等。業務放可以通過繼承JavaScriptModule介面類似自定義介面模組，宣告 與JS相對應的方法即可。
NativeModule/UIManagerModule：NativeModule是Java暴露給JS呼叫的APU集合，例如：ToastModule、DialogModule等，UIManagerModule也是供JS呼叫的API集 合，它用來建立View。業務放可以通過實現NativeModule來自定義模組，通過getName()將模組名暴露給JS層，通過@ReactMethod註解將API暴露給JS層。 
複製程式碼

6、JavascriptModuleRegistry

JavascriptModuleRegistry是JS Module對映表，NativeModuleRegistry是Java Module對映表
複製程式碼

相關文章