ReactNative源碼篇：源碼初識

關於做者

郭孝星，程序員，吉他手，主要從事Android平臺基礎架構方面的工做，歡迎交流技術方面的問題，能夠去個人Github提issue或者發郵件至guoxiaoxingse@163.com與我交流。

更多文章：github.com/guoxiaoxing…

本篇系列文章主要分析ReactNative源碼，分析ReactNative的啓動流程、渲染原理、通訊機制與線程模型等方面內容。

• 1ReactNative源碼篇：源碼初識
• 2ReactNative源碼篇：代碼調用
• 3ReactNative源碼篇：啓動流程
• 4ReactNative源碼篇：渲染原理
• 5ReactNative源碼篇：線程模型
• 6ReactNative源碼篇：通訊機制

源碼地址：github.com/facebook/re…

源碼版本：

Build Status

Circle CI

npm version

本篇文章是《ReactNative源碼篇》的第一篇文章，剛開始，咱們先不對源碼作深刻的分析，咱們先要對源碼的結構和ReactNative的框架有個大體的印象，
由此便引出了本篇文章須要討論的兩個問題：

1. ReactNative系統框架是怎樣的？
2. ReactNative系統框架的主線在哪裏，有哪些支線，如何去分析這些線路？複製代碼

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

一 ReactNative系統框架概述

ReactNative源碼結構圖

- jni：ReactNative的好多機制都是由C、C++實現的，這部分即是用來載入SO庫。
- perftest：測試配置
- proguard：混淆
- quicklog：log輸出
- react：ReactNative源碼的主要內容，也是咱們分析的主要內容。
- systrace：system trace
- yoga：瑜伽？哈哈，並非，是facebook開源的前端佈局引擎複製代碼

react依賴另外幾個包，它們的調用關係以下圖所示：

ReactNative系統框架圖以下所示：

注：JSCore，即JavaScriptCore，JS解析的核心部分，IOS使用的是內置的JavaScriptCore，Androis上使用的是webkit.org/家的jsc.so。

二 ReactNative源碼的主線與支線

從上面對ReactNative系統框架的分析，咱們很容易看出源碼的主線就在於ReactNative的啓動流程、UI的繪製與渲染以及雙邊通訊（Java調用JS，JS調用Java）。

源碼主線：

1 ReactNative應用啓動流程
2 ReactNative應用UI的繪製與渲染
3 ReactNative應用通訊機制
3 ReactNative應用線程模型複製代碼

源碼支線：

1 ReactNative運行時的異常以及異常的捕獲與處理。
2 SOLoader加載動態連接庫
3 ReactNative觸摸事件處理機制複製代碼

上面即是整個源碼的主線與支線，瞭解了大體的流程。咱們再來理解一些重要的概念，方便後續的源碼展開分析。

三 ReactNative源碼的重要概念

3.1 ReactContext

ReactContext繼承於ContextWrapper，是ReactNative應用的上下文，經過getContext()去得到，經過它能夠訪問ReactNative核心類的實現。

整個啓動流程重要建立實例之一就是ReactContext，在正式介紹啓動流程以前，咱們先來了接一下ReactContext的概念。

ReactContext繼承於ContextWrapper，也就是說它和Android中的Context是一個概念，是整個應用的上下文。那麼什麼是上下文呢，咱們知道Android的應用模型是基於組件的應用設計模式，
組件的運行須要完整的運行環境，這種運行環境即是應用的上下文。

上面的概念可能有點抽象，咱們舉個例子說明一下。

用戶與操做系統的每一次交互都是一個場景，例如：打電話、發短信等有節目的場景（Activity），後臺播放音樂等沒有節目的場景（Service），這種交互的場景（Activity、Service等）都被
抽象成了上下文環境（Context），它表明了當前對象再應用中所處的一個環境、一個與系統交互的過程。

咱們來了解一下ReactContext的具體實現與功能，先來看一下它的類圖：

從上圖能夠看出，ReactContext繼承與ContextWrapper，並有子類：

ReactApplicationContext：繼承於ReactContext，ReactContext的wrapper類，就像Context與ContextWrapper的關係同樣。
ThemedReactContext：繼承於ReactContext，也是ReactContext的wrapper類。複製代碼

3.2 ReactInstanceManager

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

3.3 CatalystInstance

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

3.4 NativeToJsBridge/JsToNativeBridge

NativeToJsBridge是Java調用JS的橋樑，用來調用JS Module，回調Java。

JsToNativeBridge是JS調用Java的橋樑，用來調用Java Module。

3.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層。

3.6 JavascriptModuleRegistry

JavascriptModuleRegistry是JS Module映射表，NativeModuleRegistry是Java Module映射表

附錄

爲了方便你們理解，準備了導讀PPT。