React Nativeソースコード:ソースの初見

React Nativeソースコード:ソースの初見
作者:郭孝星メールボックス:[email protected]ブログ:http://blog.csdn.net/allenwells 略書:http://www.jianshu.com/users/66a47e04215b/latest_アートレス
作者について
郭孝星、有名なプログラマーではなく、コード潔癖症の患者さん、プログラミングが好きで、ギターが好きで、料理が好きで、すべての面白いものと人が好きです.
文章について
著者の文章はGithub、CSDN、略書に同時に掲載されます.文章の上部にも記事のGithubリンクが添付されます.もし文章の中に何か質問があったら、メールで私と交流してください.コミュニケーションの問題について、問題をはっきり説明してください.コードと日記を添付してください.文章に何か間違いがあったら、斧も歓迎します.もしあなたがこの文章があなたの役に立つと思ったら、star文章にも行ってください.文章の最新の動きに注目してください.また、皆さんにGithubに行って文章を読むように勧めます.一方で文章の作成は全部Githubで行われています.だからGithubの更新は一番タイムリーです.一方、GithubはMarkdownに対する支持がもっといいと感じています.文章のレンダリングももっと美しいです.
記事ディレクトリ:https://github.com/guoxiaoxing/react-native-android-container/blob/master/README.md
このシリーズの文章は主にReact Nativeのソースコードを分析し、React Nativeの起動プロセス、レンダリング原理、通信メカニズムとスレッドモデルなどの内容を分析します.

React Nativeソースコード:ソースコードの初見

React Nativeソースコードの呼び出し

React Nativeソースコード編:起動プロセス

React Nativeソースコード:レンダリング原理

React Nativeソースコード:スレッドモデル

React Nativeソースコード:通信システム

ソースの住所:https://github.com/facebook/react-native
ソースのバージョン:
この文章は「React Nativeソースコード編」の最初の文章で、最初はソースコードに対して深く分析しませんでした.まずソースの構造とReact Nativeの枠組みに対して大まかな印象を持たなければなりません.これによって、この文章の議論が必要な二つの問題を引き出しました.

1. ReactNative        ？
2. ReactNative          ，     ，         ？

まず最初の問題を見に来ます.
React Nativeシステムフレームワークの概要
React Nativeソースの構造図

- jni：ReactNative        C、C++   ，         SO 。
- perftest：    
- proguard：  
- quicklog：log  
- react：ReactNative       ，           。
- systrace：system trace
- yoga：  ？  ，   ， facebook         

reactは他のいくつかのバッグに依存しています.それらの呼び出し関係は下図のようになります.

React Nativeシステムの枠組み図は以下の通りです.

注:JSCoreは、JavaScript Core、JS解析の核心部分であり、IOSは内蔵のJavaScripptCore、Androidで使用されています.https://webkit.org/家のjsc.so
React Nativeシステムフレームの主線と支線
上記のReact Nativeシステムの枠組みを分析してみると、ソースコードの主線はReactNativeの起動プロセス、UIの描画とレンダリング及び二国間通信(JavaがJSを呼び出し、JSがJavaを呼び出す)にあります.
ソースコードのメイン:

1 ReactNative      
2 ReactNative  UI      
3 ReactNative      
3 ReactNative      

ソースコード:

1 ReactNative                。
2 SOLoader       
3 ReactNative        

正式にソースコードの分析を開始する前に、私達は簡単に各種類の役割を紹介します.
React Contect(Java層)

   ContextWrapper， RN      ，  getContext()   ，       RN      。

React Instance ManagerImpl/React Instance ManagerImpl(Java層)

RN       ，  ReactContext、CatalystInstance  ，  ReactPackage     ，    ReactRootView  View           。

Catalyst Instance/Catalyst Instance Impl(Java層/C++層)

RN  Java 、C++ 、JS       ，  Java 、JS   Module      ，          。

NativeToJs Bridge(C++層)

Java  JS   ，    JS Module，  Java。

Js ToNativeBridge(C++層)

JS  Java   ，    Java Module。

JSCExector(C++層)

  WebKit JavaScriptCore，JS C++               。

Message Que(JS層)

JS    ，  Java Module  JS Module   ，    。

JavaScript Module(Java層)

JS Module，  JS Java         ， CatalystInstance    。

React Contect BaseJavaModule/BaseJava Module/NativeModule(Java層)

Java Module，  Java Js         ， CatalystInstance    。

Javascript ModuleRegistry(Java層)

JS Module   

NativeModuleRegistry(Java層)

Java Module   

付録
皆さんに分かりやすくするために、案内PPTを用意しました.