ReactNative源码篇：源码初识

本篇系列文章主要分析ReactNative源码，分析ReactNative的启动流程、渲染原理、通信机制与线程模型等方面内容。

1ReactNative源码篇：源码初识
2ReactNative源码篇：代码调用
3ReactNative源码篇：启动流程
4ReactNative源码篇：渲染原理
5ReactNative源码篇：线程模型
6ReactNative源码篇：通信机制

源码地址：https://github.com/facebook/react-native

源码版本：

 

 



本篇文章是《ReactNative源码篇》的第一篇文章，刚开始，我们先不对源码做深入的分析，我们先要对源码的结构和ReactNative的框架有个大致的印象， 

由此便引出了本篇文章需要讨论的两个问题：

1. ReactNative系统框架是怎样的？
2. ReactNative系统框架的主线在哪里，有哪些支线，如何去分析这些线路？

1
2

好，我们先来看第一个问题。

ReactNative系统框架概述

ReactNative源码结构图

- jni：ReactNative的好多机制都是由C、C++实现的，这部分便是用来载入SO库。
- perftest：测试配置
- proguard：混淆
- quicklog：log输出
- react：ReactNative源码的主要内容，也是我们分析的主要内容。
- systrace：system trace
- yoga：瑜伽？哈哈，并不是，是facebook开源的前端布局引擎

1
2
3
4
5
6
7

react依赖另外几个包，它们的调用关系如下图所示：



ReactNative系统框架图如下所示：



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

ReactNative系统框架主线与支线

从上面对ReactNative系统框架的分析，我们很容易看出源码的主线就在于ReactNative的启动流程、UI的绘制与渲染以及双边通信（Java调用JS，JS调用Java）。

源码主线：

1 ReactNative应用启动流程
2 ReactNative应用UI的绘制与渲染
3 ReactNative应用通信机制
3 ReactNative应用线程模型

1
2
3
4

源码支线：

1 ReactNative运行时的异常以及异常的捕获与处理。
2 SOLoader加载动态链接库
3 ReactNative触摸事件处理机制

1
2
3

在正式开始分析源码之前，我们先简单介绍一下各个类的作用，让大家先有个大概的印象，方便以后的讲解。

ReactContext(Java层)

继承于ContextWrapper，是RN应用的上下文，通过getContext()去获得，通过它可以访问RN核心类的实现。

1

ReactInstanceManagerImpl/ReactInstanceManagerImpl(Java层)

RN应用总的管理类，创建ReactContext、CatalystInstance等类，解析ReactPackage生成映射表，并且配合ReactRootView管理View的创建与生命周期等功能。

1

CatalystInstance/CatalystInstanceImpl(Java层/C++层)

RN应用Java层、C++层、JS层通信总管理类，总管Java层、JS层核心Module映射表与回调，三端通信的入口与桥梁。

1

NativeToJsBridge(C++层)

Java调用JS的桥梁，用来调用JS Module，回调Java。

1

JsToNativeBridge(C++层)

JS调用Java的桥梁，用来调用Java Module。

1

JSCExecutor(C++层)

管理WebKit的JavaScriptCore，JS与C++的转换桥接都在这里进行中转处理。

1

MessageQueue(JS层)

JS调用队列，调用Java Module或者JS Module的方法，处理回调。

1

JavaScriptModule(Java层)

JS Module，负责JS到Java的映射调用格式声明，由CatalystInstance统一管理。

1

ReactContextBaseJavaModule/BaseJavaModule/NativeModule(Java层)

Java Module，负责Java到Js的映射调用格式声明，由CatalystInstance统一管理。

1

JavascriptModuleRegistry(Java层)

JS Module映射表

1

NativeModuleRegistry(Java层)

Java Module映射表

1

附录

为了方便大家理解，准备了导读PPT。