React Native 源码深度探秘：启动流程

2023-12-11 11:30:44

前言

React Native 凭借其跨平台开发能力，深受开发者的青睐。为了深入理解其工作原理，本文将对 React Native 的启动流程进行源码分析。我们将从应用初始化开始，一步步探索 JS 页面容器、安卓和 iOS 启动过程，并揭秘性能优化技巧。

React Native 初始化

在安卓系统中，React Native 的初始化过程在应用的 Application 类中完成。首先，我们会通过 ReactApplication.setup() 方法来配置 React Native 环境。该方法主要做了三件事：

创建 ReactInstanceManager 实例，负责管理 React Native 实例生命周期。
创建 JSBundleLoader 实例，用于加载 JS 代码包。
调用 reactNativeHasStarted() 方法，向 React Native 框架发出启动信号。

在 iOS 系统中，React Native 的初始化过程略有不同。它是在 AppDelegate.m 文件中完成的。主要步骤如下：

创建 RCTBridge 实例，负责协调原生代码和 JS 代码之间的交互。
加载 JS 代码包。
创建根视图控制器，作为 JS 页面的容器。

JS 页面容器

在 React Native 中，JS 页面容器负责承载 JS 代码执行产生的视图。在安卓系统中，该容器是 ReactActivity 类。ReactActivity 继承自 FragmentActivity，它将 JS 代码的执行环境封装为一个 Fragment，并通过 ReactFragment 类来进行交互。

在 iOS 系统中，JS 页面容器是 RCTRootView 类。它继承自 UIView，通过 RCTUIManager 类来协调原生代码和 JS 代码之间的交互。

安卓启动流程

在安卓系统中，React Native 应用的启动流程大致如下：

应用启动： 应用启动时，会调用 Application.onCreate() 方法。
React Native 初始化： 在 onCreate() 方法中，调用 ReactApplication.setup() 方法进行 React Native 初始化。
加载 JS 代码包： 通过 JSBundleLoader 实例加载 JS 代码包。
创建根视图： 创建 ReactActivity 实例，并将其设置为根视图。
启动 JS 页面： 调用 ReactInstanceManager.createReactContext() 方法启动 JS 页面。

iOS 启动流程

在 iOS 系统中，React Native 应用的启动流程大致如下：

应用启动： 应用启动时，会调用 AppDelegate.didFinishLaunchingWithOptions() 方法。
React Native 初始化： 在 didFinishLaunchingWithOptions() 方法中，创建 RCTBridge 实例并加载 JS 代码包。
创建根视图控制器： 创建 RCTRootViewController 实例，作为根视图控制器。
启动 JS 页面： 调用 RCTRootViewController.loadJS() 方法启动 JS 页面。