ReactNative 进阶（二）：ReactNative 项目文件结构介绍

一、前言

在学习一门新语言，搭建完新项目时，有必要了解下项目结构。

android:Android 原生工程目录；

ios:IOS 原生工程目录；

package.json:React Native 是基于 javasript 开发的语言，使用 npm 做为包管理，这个文件就是 npm 的包管理的文件，主要配置我们依赖的第三方包；

index.js:这个文件是 IOS 和 Android 在相应设备上打包运行的入口文件；（备注：早期 React Native 项目应该是index.ios.js和index.android.js两个单独的入口文件）

img：存放界面要显示的 png 图片；

public：存放工具 js，网络请求 js 的封装，数据存储 js 等相关操作的 js；（备注：可以在 public 中创建分类目录，public/net、public/datastorage等）

scene：存放项目的 JS 组件（界面）；（备注：可以在 scene 目录下创建不同功能模块的目录，例如scene/draw,scene/user,scene/home等二级三级目录）

二、优质博文

• 《ReactNative进阶（一）：ReactNative学习资料汇总》

• 《ReactNative进阶（三）：ReactNative项目启动原理介绍》

• 《ReactNative进阶（四）：ReactNative原理剖析之JS 层渲染之 diff 算法》

• 《ReactNative进阶（五）：ReactNative原理剖析之 Native层的渲染流程》

三、延伸阅读 ReactNative 项目启动原理介绍

3.1 前言

先带大家分析 2 张架构图，对 RN 大致的运行加载过程有个印象。

ReactNative系统框架图如下所示:

启动流程图如下所示：

在开始分析之前，先思考一个问题：

为什么ReactNative能像web端一样实现跨端和热更新，同时又有接近Native的性能呢？

ReactNative 的本质是在 JS 端编写 React 代码，通过 JavaScriptCore 引擎，把 JS 端编写的组件和事件转换成 Native 原生组件进行渲染，如下图：

理解 ReactNative 的实现原理，主要是搞清楚 JS 端与 Native 端的通信原理。而要保证 JavaScript 和 Native 具备向对方通信的能力，首先需要搞清楚 RN 在启动的时候都做了哪些事情，这篇文章就是基于 ReactNatve 源码分析的基础上，对 ReactNative 的启动流程进行深入浅出的分析。

3.2 概述

ReactNative 启动的入口是啥？

• ReactNative 启动是从创建一个 RCTRootView 作为入口视图容器开始运作的，创建 RCTRootView 时，会先创建一个 JSBridge 作为 Native 端与 JS 端交互的桥梁。整个 RN 的启动工作基本都是在创建 JSBridge 时做的。

• JSBridge 的核心是 RCTBatchedBridge ，JSBridge 的工作主要在 RCTBatchedBridge 初始化中处理。启动流程采用 GCD 来进行多线程操作，其中大部分耗时操作是在并发队列com.facebook.react.RCTBridgeQueue中进行的。

RCTBatchedBridge 启动主要进行六个准备工作：

1.加载 JSBundle 代码（并行队列异步执行）2.初始化 Native Modules（同步执行）3.初始化 JSCExecutor（与第 4 步在同一并行队列同时执行）4.创建 Module 配置表（与第 3 步在同一并行队列同时执行）5.注入 Module 配置信息到 JSCExecutor（第 3、4 步执行完再执行）6.执行 JSBundle 代码（前 5 步都执行完再执行）

简单说，JSBridge的初始化就是从加载js源代码（JSBundle）到JSBundle能被原生端执行的过程，具体做了哪些准备工作呢？首先，ReactNative的js组件及事件最后都会映射成原生组件，而所有原生组件暴露给 JavaScript 的类都在Native Modules里。那么，js端是怎么映射到原生组件的呢？是通过Module 配置表找到Native Modules里对应的类。最后，js调用原生方法等交互，及映射成原生代码都是通过JSCExecutor。

所以JSBridge的初始化操作，也就是对JSBundle、Native Modules、Module 配置表、JSCExecutor四个模块进行初始化，具体逻辑流程图如下：

1. 加载 JSBundle 代码(异步)

JSBundle： React代码经过打包后生成的JavaScript 源码和图片等资源文件；热更新的实质：将JSBundle放在服务器，在合适时机（启动/切换前后台/打开某个页面按需加载等），将JSBundle下载到本地来实现热更新；

将 JavaScript 源码加载到内存中，方便之后注入和执行，这一步中，React 中的 JSX 语法已经转换成 JavaScript。执行代码如下：

[RCTBatchedBridge loadSource: onProgress:]

2. 初始化 Native Modules（同步）同步初始化所有不能被懒加载的供 JS 端调用的 Native 模块。

Native Modules：所有Native需要暴露给 JS 的类（即标有宏：RCT_EXPORT_MODULE()的类）

主要作用：找到所有 Native 需要暴露给 JavaScript 的类（即被标记有宏：RCT_EXPORT_MODULE()的类），方便后面把这些模块信息注入 JS 端。执行代码如下：

[RCTBatchedBridge initModulesWithDispatchGroup:]

3. 初始化 JSCExecutor（异步）

JSCExecutor 是JavaScriptCore引擎，负责JS端和Native端的通信。

执行代码如下：

[RCTBatchedBridge setUpExecutor]

1.初始化时，创建一个优先级跟主线程优先级同级的单独 JS 线程，同时创建一个 Runloop，让 JS 线程能循环执行不会退出。

2.初始化时，通过 JavaScriptCore 作为引擎，创建 JS 执行的上下文环境，并向 JS 上下文中注入 JS 与 Native 通信的方法。其中，在 Native 端实现的供 JS 端调用的几个重要方法:

• nativeRequireModuleConfig ：js 获取 native module 配置表。RN 并没有保存整个的 Native 方法配置表，而仅仅保存了模块名字。这个回调就是 JS 每次根据 module 名可以查到这个 module 的模块配置信息;

• nativeFlushQueueImmediate： js 触发 native 进行队列消息处理。一般来说 JS 并不会主动调用 Native 的方法，而是等着 Native 定时器每隔一段时间到 JS 的 eventQueue 中去取，取出来以后批量执行。而 nativeFlushQueueImmediate 就是让 JS 直接调用 Native 的方法而不用等待。

• nativeCallSyncHook：同步调用;

4. 创建 Module 配置表（异步）

Module 配置表:1、把所有模块信息集中收集起来，保存到一个数组中，经过序列化后，注入到JS中。2、JS 端通过 Native端注入的 nativeRequireModuleConfig 方法，根据 module 名可以查询该模块配置信息。

创建 Module 配置表，与初始化 JSCExecutor 的操作一起被加入并发队列。

com.facebook.react.RCTBridgeQueue异步进行。执行代码如下：

[RCTBatchedBridge moduleConfig]

(NSString *)moduleConfig{  NSMutableArray<NSArray *> *config = [NSMutableArray new];  for (RCTModuleData *moduleData in _moduleDataByID) {    if (self.executorClass == [RCTJSCExecutor class]) {      [config addObject:@[moduleData.name]];    } else {      [config addObject:RCTNullIfNil(moduleData.config)];    }  }
  return RCTJSONStringify(@{    @"remoteModuleConfig": config,  }, NULL);}

获取 moduleConfig 时，会根据设置不同的 executorClass，收集的模块信息会有区别：

• 如果是RCTJSCExecutor类型，Native 端只保存模块的名字，JS 端通过 Native 端注入的nativeRequireModuleConfig方法，根据 module 名可以查到这个 module 对应的模块配置信息。

• 如果不是RCTJSCExecutor类型，通过moduleData.config 链接到[RCTModuleData config]，会把 module 名、常量、函数等 native module 的配置信息都保存起来。

5. 注入 Module 配置信息到 JS 端执行 [RCTBatchedBridge injectJSONConfiguration:onComplete:]当初始化 JSCExecutor 和创建 Module 配置表工作都准备好后，会将 module 模块配置信息注入 JS 端。

6. 执行 JSBundle 代码执行 [RCTBatchedBridge executeSourceCode:]

以上五步操作都执行完成后，执行 JSBundle 中的 JavaScript 源码。至此，JavaScript 和 Objective-C 都具备了向对方交互的能力，启动流程的准备工作算是全部完成了。