ReactNative原始碼解析-初識原始碼
摘要：
在開始《ReactNative原始碼解析》系列文章之前，我們先不對原始碼做深入的分析，我們先對原始碼的結構和ReactNative的框架做個簡要的分析和了解，我們將圍繞它的核心進行展開。
1. ReactNative框架是怎樣的？
2. ReactNative框架的核心是什麼，如何去分析？...
在開始《ReactNative原始碼解析》系列文章之前，我們先不對原始碼做深入的分析，我們先對原始碼的結構和ReactNative的框架做個簡要的分析和了解，我們將圍繞它的核心進行展開。
1. ReactNative框架是怎樣的？ 2. ReactNative框架的核心是什麼，如何去分析？ 複製程式碼
好，我們先來看第一個問題。
一、ReactNative框架總覽
ReactNative原始碼結構如下：
- jni：ReactNative的核心機制都是由C、C++實現的，這部分便是用來載入SO庫。 - perftest：測試配置 - proguard：混淆 - react：ReactNative Java層原始碼部分，我們將對這些原始碼進行重點分析。 - systrace：system trace - yoga：facebook開源跨平臺的佈局引擎 複製程式碼
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是一個概念，是整個應用的上下文。 複製程式碼
從類圖中可以看出繼承關係，有沒有發現和Android中的context繼承關係很像呢？應了那句話，好的設計總是相似的。
2、ReactInstanceManagerReactInstanceManager是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對映表 複製程式碼