React-Native应用程序的内容是由Javascript语言开发的，而Android或者IOS手机系统只是一个容器和各类服务提供者。
众所周知，Javascript是一门解释型脚本语言，对于浏览器而言，浏览器负责解释和执行Javascript脚本。而对于手机系统而言，同样是负责解释和执行Javascript脚本，当然其核心都是使用的webkit内核。
浏览器获取Javascript脚本，主要通过网络下载 + 本地缓存的机制，达到效率的最大化。当然，移动应用也不例外，但不同的是移动应用可以将Javascript脚本直接打包在应用程序内，免去网络下载这个极其不稳定的过程，这样可以达到加载效率和性能流畅的最大化，也就是风靡一时Hybrid技术，而这一点浏览器是做不到的。
无论使用网络下载还是本地文件，最终都是要加载JS文件，而React-Native项目中包含大量的JS文件构成的框架和组件，那么Android框架又是如何去加载它们的呢？这个过程就是本篇博客的研究的主题了！
1、JS文件的整合
有这样一个常识：拷贝100个1M的文件，比拷贝1个100M的文件要慢的多。
一个React-Native项目中，包含有成百上千个JS文件，可以想象，如果一次性加载（读）这么多个文件，其效率将会极其低下。但是如果将这些JS文件预先合并成一个文件，然后去加载，其效率肯定能提高很多。
当所有相关的JS文件合并成一个文件后，还需要进行优化。包括去除空格和换行符、代码混淆等，这样处理之后会有两个好处：
1、大幅减小文件大小，无论是对加载效率还是应用体积，好处都是莫大的。
2、提高应用程序的安全性，防止反编译等。
那么，React-Native框架是如何整合JS文件的呢？
首先，需要知道一点，这个整合过程肯定是极其缓慢的，毕竟涉及上千个文件，所以不能是放在应用程序内进行，最合适的做法是预处理，即时机放在打包或者编译时。
另外，Javascript前端开发的模式流程和移动应用开发的模式流程是完全不一样的。Javascript开发者，不需要反复的打包安装应用，对他们而言，一个解释执行器（比如浏览器）就够了，所有的代码都直接放在本地服务器。
React-Native很好地遵循了这一模式，一次安装的应用程序作为解释执行器，nodejs服务器作为本地服务器，所有的JS文件全部部署在这个服务器上。前端开发者修改完代码，直接在应用程序上reload一下就能看到结果。这种模式，对前端开发者来说几乎不要学习什么，完全是轻车熟路的。
所以，JS整合的工作，自然就是交给nodejs服务器来做了！整合过程的细节不是本博客的重点，就不去分析了。
如果是正式发布包，在应用运行时，是不存在本地nodejs服务器这个概念的，所以JS整合文件都是预先打包到assets资源文件里的。下面，来看下这个打包过程。
对JS整合文件的打包逻辑，位于项目\android\app\react.gradle
...
def devEnabled = !targetName.toLowerCase().contains("release")
commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
...
在gradle打包流程里面插入一个自定义Task任务，即在命令行中运行react-native bundle命令，整合和优化JS文件，存放到assets资源文件目录中。
来看一下react-native bundle命令的参数。
这里写图片描述
–entry-file： 应用入口文件，默认为项目根目录下的index.android.js或index.ios.js
–platform：系统平台，android或者ios选其一
–transformer： babel转换器，默认使用\node_modules\react-native\packager\transformer.js
–dev：是否开发模式，默认开启，此时不会进行JS混淆和压缩优化，方便开发者调试。
–bundle-output： 最终整合的输出文件名，一般是index.android.bundle或index.ios.bundle
–bundle-encoding：整合文件的编码格式，默认utf-8
–assets-dest：整合文件存储目录，android打包时会定义为项目的assets资源编译临时目录。
所以，Android项目打正式包的时候，运行的命令如下：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output index.android.bundle --assets-dest xxx
其中xxx表示编译资源包时assets所在临时目录，一般为app/build/intermediates/res/merged/release/的绝对路径。
最终apk安装包的assets文件夹下将有一个名为index.android.bundle的JS文件（无扩展名）。当应用程序启动的时候，只要去加载这个文件，整个React-Native就被完全启动了！
有趣的是，React-Native还额外提供了一个unbundle命令，使用方式和bundle命令完全相同。unbundle命令是在bundle命令的基础上增加了一项功能，除了生成整合JS文件index.android.bundle外，还会生成各个单独的未整合JS文件（但会被优化），全部放在js-modules目录下，同时会生成一个名为UNBUNDLE的标识文件，一并放在其中。UNBUNDLE标识文件的前4个字节固定为0xFB0BD1E5，用于加载前的校验。需要注意的是，js-modules目录会一并打包到apk的assets文件夹中，如果使用unbundle命令的话。
另外，unbundle命令是后来增加扩展的功能，到目前为止并没有使用到，这里提到是因为后面分析JS文件加载时会有特殊处理。
2、JS文件的加载
不管JS文件是从服务器下载，还是直接使用本地文件，最终都是需要一次性加载到webkit内核的解释器中的。当然，这部分功能都是有Native框架完成的，我们来研究一下。
首先，来看需要加载的对象。
生产模式下，需要加载的JS文件为assets/index.android.bundle
开发模式下，需要先从服务器下载到本地，缓存文件为data/data/package-name/files/ReactNativeDevBundle.js
代码位于com.facebook.react.devsupport.DevSupportManagerImpl.java
public class DevSupportManagerImpl implements DevSupportManager {
...
private static final String JS_BUNDLE_FILE_NAME = "ReactNativeDevBundle.js";
...
// We store JS bundle loaded from dev server in a single destination in app's data dir.
// In case when someone schedule 2 subsequent reloads it may happen that JS thread will
// start reading first reload output while the second reload starts writing to the same
// file. As this should only be the case in dev mode we leave it as it is.
// TODO(6418010): Fix readers-writers problem in debug reload from HTTP server
mJSBundleTempFile = new File(applicationContext.getFilesDir(), JS_BUNDLE_FILE_NAME);
}
加载是由JSBundleLoader来处理的，提供了三种处理方式：
1、加载本地JS文件，包括assets文件和普通文件。
2、加载网络JS文件，同时提供缓存目录，方便reload时直接切换到1方式。
3、加载网络JS文件，直接远程调用，用于debug调试。
仔细阅读代码，发现后两种方式，和第1种调用的API一样，所以我们只要看第1种处理方式就行了。
public abstract class JSBundleLoader {
public static JSBundleLoader createFileLoader(
final Context context,
final String fileName) {
return new JSBundleLoader() {
@Override
public void loadScript(ReactBridge bridge) {
if (fileName.startsWith("assets://")) {
bridge.loadScriptFromAssets(context.getAssets(), fileName.replaceFirst("assets://", ""));
} else {
bridge.loadScriptFromFile(fileName, "file://" + fileName);
}
}
@Override
public String getSourceUrl() {
return (fileName.startsWith("assets://") ? "" : "file://") + fileName;
}
};
}
}
和普通的磁盘文件不同，assets文件是存在于apk安装包内的，只能通过AssetManager来操作，不能直接读取。所以对于这两种情况，分别使用
loadScriptFromAssets和loadScriptFromFile来处理。
两种方式都是通过ReactBridge来调用到JNI层，来看这两个native方法注册的部分，位于\jni\react\jni\OnLoad.cpp
registerNatives("com/facebook/react/bridge/ReactBridge", {
...
makeNativeMethod("loadScriptFromAssets", "(Landroid/content/res/AssetManager;Ljava/lang/String;)V", bridge::loadScriptFromAssets),
makeNativeMethod("loadScriptFromFile", bridge::loadScriptFromFile),
...
});
2.1 加载Assets文件
先来看bridge::loadScriptFromAssets的逻辑，同样在OnLoad.cpp文件里
static void loadScriptFromAssets(JNIEnv* env, jobject obj, jobject assetManager, jstring assetName) {
...
auto manager = AAssetManager_fromJava(env, assetManager);
auto bridge = extractRefPtr<CountableBridge>(env, obj);
auto assetNameStr = fromJString(env, assetName);
...
auto script = react::loadScriptFromAssets(manager, assetNameStr);
...
if (JniJSModulesUnbundle::isUnbundle(manager, assetNameStr)) {
loadApplicationUnbundle(bridge, manager, script, "file://" + assetNameStr);
} else {
loadApplicationScript(bridge, script, "file://" + assetNameStr);
}
if (env->ExceptionCheck()) {
return;
}
...
}
assetManager: 指的是 Android系统的资源管理器AssetManager（java）, 所有资源文件都是通过它来管理的，这里是通过系统动态链接库的android/asset_manager_jni.h的AAssetManager_fromJava方法获取到AAssetManager（c++）对象的操作指针。
assetName: 这里是文件名，为index.android.bundle
接下来，通过JSLoader对象的loadScriptFromAssets方法读文件，得到字符串script，也就是JS的内容。
下面一步，判断isUnbundle。
前面提过，如果打包时使用unbundle命令，会在assets中生成js-modules文件夹，里面存放着标志文件UNBUNDLE和各个单独未整合到一起的JS文件。在C++层中有着专门的类JniJSModulesUnbundle来处理这些文件，代码位于react\jni\JniJSModulesUnbundle.cpp。
先来看JniJSModulesUnbundle::isUnbundle
const magic_number_t MAGIC_FILE_HEADER = 0xFB0BD1E5;
const std::string MAGIC_FILE_NAME = "UNBUNDLE";
...
bool JniJSModulesUnbundle::isUnbundle(AAssetManager *assetManager, const std::string& assetName) {
if (!assetManager) {
return false;
}
auto magicFileName = jsModulesDir(assetName) + MAGIC_FILE_NAME;
auto asset = openAsset(assetManager, magicFileName.c_str());
if (asset == nullptr) {
return false;
}
magic_number_t fileHeader = 0;
AAsset_read(asset.get(), &fileHeader, sizeof(fileHeader));
return fileHeader == htole32(MAGIC_FILE_HEADER);
}
判断标志文件UNBUNDLE是否存在，并校验文件头部4个字节是否为
0xFB0BD1E5
如果isUnbundle为true的话，调用loadApplicationUnbundle，猜测应该是加载js-modules目录下面的单个JS文件了。
static void loadApplicationUnbundle(const RefPtr<CountableBridge>& bridge, AAssetManager *assetManager, const std::string& startupCode, const std::string& startupFileName) {
try {
bridge->loadApplicationUnbundle(std::unique_ptr<JSModulesUnbundle>(new JniJSModulesUnbundle(assetManager, startupFileName)), startupCode, startupFileName);
} catch (...) {
translatePendingCppExceptionToJavaException();
}
}
JniJSModulesUnbundle::JniJSModulesUnbundle(AAssetManager *assetManager, const std::string& entryFile) :
m_assetManager(assetManager),
m_moduleDirectory(jsModulesDir(entryFile)) {}
static std::string jsModulesDir(const std::string& entryFile) {
std::string dir = dirname(entryFile.c_str());
// android's asset manager does not work with paths that start with a dot
return dir == "." ? "js-modules/" : dir + "/js-modules/";
}
首先，创建一个JniJSModulesUnbundle对象，里面保存着AAssetManager对象指针m_assetManager和文件根目录m_moduleDirectory，有了这两者，只要知道文件名，就能获取到指定的JS文件了。
接下来，调用bridge->loadApplicationUnbundle，实现代码在react\Bridge.cpp，由于Bridge.cpp只是对JSExecutor的转发，所以直接来看react\JSCExecutor.cpp
void JSCExecutor::loadApplicationUnbundle(std::unique_ptr<JSModulesUnbundle> unbundle, const std::string& startupCode, const std::string& sourceURL) {
if (!m_unbundle) {
installGlobalFunction(m_context, "nativeRequire", nativeRequire);
}
m_unbundle = std::move(unbundle);
loadApplicationScript(startupCode, sourceURL);
}
参数中的智能指针unbundle会被赋值给JSCExecutor对象的m_unbundle，由于m_unbundle初始为空，所以第一次会执行installGlobalFunction。
installGlobalFunction方法的作用是为Javascript的Global全局对象动态创建属性函数，这里是创建了一个名为nativeRequire的属性，指向的函数是JSCExecutor::nativeRequire。如果在Javascript代码中使用nativeRequire，就会对应执行JSCExecutor::nativeRequire。
比如，在Javascript中使用：
global.nativeRequire('TextInput')
就会加载assets/js-modules/TextInput.js这个文件，来看nativeRequire的实现细节。
JSValueRef JSCExecutor::nativeRequire(...){
...
JSCExecutor *executor = s_globalContextRefToJSCExecutor.at(JSContextGetGlobalContext(ctx));
...
double moduleId = JSValueToNumber(ctx, arguments[0], exception);
...
executor->loadModule(moduleId);
}
void JSCExecutor::loadModule(uint32_t moduleId) {
auto module = m_unbundle->getModule(moduleId);
auto sourceUrl = String::createExpectingAscii(module.name);
auto source = String::createExpectingAscii(module.code);
evaluateScript(m_context, source, sourceUrl);
}
JSModulesUnbundle::Module JniJSModulesUnbundle::getModule(uint32_t moduleId) const {
...
std::ostringstream sourceUrlBuilder;
sourceUrlBuilder << moduleId << ".js";
auto sourceUrl = sourceUrlBuilder.str();
auto fileName = m_moduleDirectory + sourceUrl;
auto asset = openAsset(m_assetManager, fileName, AASSET_MODE_BUFFER);
const char *buffer = nullptr;
if (asset != nullptr) {
buffer = static_cast<const char *>(AAsset_getBuffer(asset.get()));
}
...
return {sourceUrl, std::string(buffer, AAsset_getLength(asset.get()))};
}
nativeRequire函数的功能是加载js-modules目录中对应的JS文件，moduleId虽然是int型，但实质上是文件名（区别于通信机制中的moduleId），这里的m_unbundle就是前面保存的JSModulesUnbundle对象的智能指针了。
总结一下，loadApplicationUnbundle的主要功能是，为Javascript的Global全局对象创建nativeRequire函数，Javascript中调用时，能够加载对应的JS文件。
处理完unbundle的逻辑，该继续完成assets/index.android.bundle文件的加载了，前面分析到此文件的内容已经读成字符串script，无论是否isUnbundle，都会调用loadApplicationScript
void JSCExecutor::loadApplicationScript(const std::string& script, const std::string& sourceURL) {
...
String jsScript = String::createExpectingAscii(script);
...
String jsSourceURL(sourceURL.c_str());
...
if (!jsSourceURL) {
evaluateScript(m_context, jsScript, jsSourceURL);
} else {
// If we're evaluating a script, get the device's cache dir
// in which a cache file for that script will be stored.
evaluateScript(m_context, jsScript, jsSourceURL, m_deviceCacheDir.c_str());
}
flush();
}
由于sourceURL的值不为空，所以执行的evaluateScript方法是带有缓存目录参数的，m_deviceCacheDir缓存目录为系统的/data/data/cache目录，用来存储script 。
evaluateScript方法的作用就是使用webkit去真正解释执行Javascript了！
2.2 加载普通File文件
相比于从assets中加载文件，直接加载磁盘文件就简单得多了，这种只用在开发模式中，加载从本地服务器上down到手机内存中的JS文件。
static void loadScriptFromFile(JNIEnv* env, jobject obj, jstring fileName, jstring sourceURL) {
...
auto bridge = jni::extractRefPtr<CountableBridge>(env, obj);
auto fileNameStr = fileName == NULL ? "" : fromJString(env, fileName);
...
auto script = fileName == NULL ? "" : react::loadScriptFromFile(fileNameStr);
...
loadApplicationScript(bridge, script, jni::fromJString(env, sourceURL));
...
}
先将fileName对应的文件内容读读取成字符串script，然后调用loadApplicationScript使用webkit内核解释执行，需要特别注意的是如果fileName为空或者文件不存在，webkit内核在加载时，会使用sourceURL自动下载并缓存。
读文件loadScriptFromFile的实现在react\jni\JSLoader.cpp中
std::string loadScriptFromFile(const std::string& fileName) {
...
std::ifstream jsfile(fileName);
if (jsfile) {
std::string output;
jsfile.seekg(0, std::ios::end);
output.reserve(jsfile.tellg());
jsfile.seekg(0, std::ios::beg);
output.assign((std::istreambuf_iterator<char>(jsfile)), std::istreambuf_iterator<char>());
return output;
}
...
return "";
}
简单的文件读取操作，不细说了。
3、最后一步
你以为到这里就结束了？当然不了！
还漏了一步，loadApplicationScript中使用evaluateScript解释执行Javascript代码，是没有处理执行结果的，也就是意味着Javascript的加载执行最终并没有能够和Native完全建立通信连接，所以Javascript的执行结果并没有反馈到Native端。
原因是我们漏了最后一步：flush
void JSCExecutor::flush() {
// TODO: Make this a first class function instead of evaling. #9317773
std::string calls = executeJSCallWithJSC(m_context, "flushedQueue", std::vector<folly::dynamic>());
m_bridge->callNativeModules(*this, calls, true);
}
手动调用MessageQueue.js的flushedQueue方法，将Javascript执行过程中需要调用Native组件的通信请求通知到Native。这个过程在React-Native系列Android——Native与Javascript通信原理（二）中详细分析过。
flushedQueue() {
this.__callImmediates();
let queue = this._queue;
this._queue = [[], [], [], this._callID];
return queue[0].length ? queue : null;
}
这样，在JS加载后，Native组件也就被调用起来了，比如视图结构等等。
到此，JS文件的加载过程才算真正结束了。
网友评论