React Native 运行原理

date

Jun 29, 2023

slug

React Native 运行原理

status

Published

我们可以把RN整个架构分为三层：

第一层是最上面我们写的 React 的js代码层，这里面写的代码是跑在jsc上，debug调试模式下跑在浏览器js解析引擎，通过 websocket 发送到移动设备。

第二层是RN建立的一个 bridge 桥接js和native ,在0.59之前是所有通信都是json序列化后通过bridge异步通信，0.59开始用了新架构Fabric 实现的JSI实现了js 和 native的直接共享内存调用，而无需再经过bridge。

第三是 native 层，主要渲染原生组件，和把事件传递出去。js上的虚拟节点是通过 yoga 解析，映射为原生组件再渲染，所以能实现一套js代码可以在安卓和ios上运行。

在js层写的代码和资源最终都会被打包为 jsbundle 文件，jsbundle 里面是一个自执行的函数，参数为含所有模块标记的数组。

RCTBridge

以iOS为例，要在iOS上跑这个文件，主要通过 RCTBridge 初始化加载这个文件，然后 RCTRootView 初始化调用这个bridge。在 RCTBridge 初始化过程中会在初始化一个 RCTCxxBridge 的实例 batchedBridge 挂在自己身上，然后 batchedBridge 调用 start 方法，这个方法主要做4件事情：

1 新建一个 js线程

RN上生成组件树和dom-diff、js代码执行就是跑在这个线程上，被挂到 runloop 上不退出。

2 加载所有要暴露给js层的原生模块

包括RN实现的和开发者自己实现的，每个模块都生成对应的 RCTModuleData 。接着使用上面创建好的js线程执行 Instance 的初始化，过程中主要初始化了一个 NativeToJsBridge 实例变量，在这过程中又初始化了一个JSIExecutor的实例，这是 Fabric（c++实现的渲染器）架构的主角。

3 开始异步加载 jsbundle 资源，此步骤是和2一起开始的。

4 在2、3都完成之后则开始执行这个js代码

执行代码是调用RCTCxxBridge的 executeSourceCode 方法，在这方法里就一层层的使用了步骤2初始化的Instance，NativeToJsBridge，JSIExecutor。最后在JSIExecutor的loadApplicationScript方法里往js的执行环境向global注入了一个对象和两个方法，这个对象是nativeModuleProxy，是 native 模块的配置信息，包含着native module 的模块id 和方法id，这个配置信息在原生一侧也缓存了一份，在未来js调用native时，就是传着模块id 和方法id实现原生模块的调用。JSIExecutor 最后会触发jsc的JSEvaluateScript方法执行js源码。

5 创建视图

在js源码执行完成后，RCTCxxBridge发通知给到 RCTRootView 去执行 runApplication 方法，这个方法会把模块名方法名等信息发到js层，AppRegistry的runApplication在被调用后做了一系列操作，然后开始创建视图，然后经过 yoga 解析渲染出原生UI。