ReactNative RN 与 iOS 通信原理解析（JS 加载及执行篇）

引言

在上一篇文章中，我们探讨了 React Native 初始化的过程，从原生代码到 JS 引擎的创建，再到桥接模块的初始化。而本篇，我们将继续我们的旅程，深入剖析 React Native 中 JS 的加载和执行过程，为您揭示 React Native 与 iOS 通信的奥秘。

JS 引擎初始化

React Native 使用 JavaScriptCore 作为其 JS 引擎。在 RN 初始化的最后一步，NativeModules.jsModuleManagerInitialize 会被调用，这个函数的目的是初始化 JavaScriptCore。初始化过程包括：

1. 创建一个新的 JSContext 对象。JSContext 是 JavaScriptCore 中的一个类，它代表了一个 JavaScript 运行时环境。
2. 将 JSContext 存储在全局变量 global.jsContext 中。
3. 将 JS 引擎的桥接模块添加到 JSContext 中。
4. 初始化 JS 引擎的各种环境变量。

JS 代码加载

在 JS 引擎初始化之后，就可以加载 JS 代码了。React Native 的 JS 代码存储在两个地方：

1. 应用程序包（Bundle）中的 main.jsbundle 文件。
2. React Native 的核心库文件（Core Library）。

应用程序包中的 main.jsbundle 文件是通过 react-native bundle 命令打包生成的。它包含了应用程序的 JS 代码和资源文件。React Native 的核心库文件则是一组预编译好的 JS 文件，它包含了 React Native 的核心功能和 API。

JS 代码加载的过程如下：

1. 调用 RCTBundleURLProvider.getBundleURL 函数获取 main.jsbundle 文件的 URL。
2. 使用 NSURLRequest 创建一个网络请求。
3. 发送网络请求以获取 main.jsbundle 文件。
4. 将 main.jsbundle 文件的内容加载到内存中。
5. 将核心库文件的路径添加到 JS 引擎的搜索路径中。

JS 代码执行

JS 代码加载完毕后，就可以执行了。React Native 的 JS 代码执行过程如下：

1. 创建一个新的 JSVirtualMachine 对象。JSVirtualMachine 是 JavaScriptCore 中的一个类，它代表了一个 JavaScript 虚拟机。
2. 将 JSContext 添加到 JSVirtualMachine 中。
3. 将 JS 代码加载到 JSVirtualMachine 中。
4. 执行 JS 代码。

JS 代码执行完成后，React Native 的初始化过程就完成了。

总结

在本篇文章中，我们深入剖析了 React Native 中 JS 的加载和执行过程。我们了解了 JS 引擎的初始化过程、JS 代码的加载过程以及 JS 代码的执行过程。这些知识对理解 React Native 的通信机制非常重要。

希望这篇文章对您有所帮助。如果您有任何问题，请随时与我联系。