深度解析React Native底层核心架构

React Native 工作原理深度解析

一、核心架构：三层异构协作体系

React Native 的跨平台能力源于其独特的 JS层-Shadow层-Native层 架构设计，三者在不同线程中协同工作：

JS层
运行于JavaScriptCore（iOS）或Hermes（Android）引擎，负责业务逻辑与UI布局计算。开发者编写的React组件在此生成虚拟DOM树，并通过 Flexbox布局系统 完成跨平台适配。此层采用 异步事件驱动模型 ，通过事件循环机制处理用户交互、网络请求等异步操作。
Shadow层
作为中间表示层，由C++实现的 Yoga引擎 负责将Flexbox布局转换为平台特定的坐标系数据。此层维护 虚拟DOM树的轻量副本 ，通过 Diff算法 计算最小变更集，避免全量渲染带来的性能损耗。例如，当JS层检测到<View>组件的位置变化时，Shadow层仅更新受影响节点的布局属性。
Native层
调用原生UI组件（iOS的UIView/Android的View）进行最终渲染。通过 平台适配器 将虚拟DOM指令转化为原生API调用，如将React的<Text>组件映射为iOS的UILabel或Android的TextView。此层直接访问设备硬件（如GPU渲染管线），确保动画流畅度可达60FPS。

二、通信机制演进：从异步桥接到同步直连

1. 旧架构的Bridge模式（2015-2022）

Bridge 是 JavaScript 与原生代码通信的核心枢纽，采用 异步消息队列+序列化机制 实现跨平台交互

在这里插入图片描述

Bridge"桥接"使这一切成为可能，它使得react可以调用宿主平台开放的UI组件。react组件通过render方法返回了描述界面的标记代码。

web平台：react最终将标记代码解析成浏览器的dom
react native中：标记代码会被解析成特定平台的组件如组件将会表现为iOS平台的UIView

通信流程原理

与跨语言模型的调用思路类似

1. JS 调用 Native 模块

// JS 调用示例
NativeModules.CalcModule.add(2, 3, (result) => console.log(result));

其底层执行流程如下：
• 序列化阶段
JS 线程将方法名 add、参数 (2,3) 和回调函数序列化为 JSON 对象，格式形如：
{ module: 'CalcModule', method: 'add', args: [2,3], callbackId: 123 }。
• 跨线程传递
消息通过 单线程消息队列 传递到 Native 主线程，期间触发多次线程切换（JS 线程 → Bridge 队列 → UI 线程）。
• 反序列化执行
Native 层根据 module/method 查找注册表，将 JSON 参数反序列化为原生数据类型（如 NSInteger），执行 add: 方法实现。
• 回调处理
计算结果再次通过序列化传回 JS 线程，触发 callbackId 对应的 JS 函数。

2. Native 调用 JS 模块

反向通信通过 事件订阅机制 实现：
• Native 模块调用 RCTEventEmitter 发送事件，携带序列化后的数据包。
• JS 端的 NativeEventEmitter 监听并解析事件，触发对应的 React 组件状态更新。

核心设计特性

异步批处理机制

通过 JSON序列化 传递消息，JS与Native的通信需经过：

典型延迟可达100ms+，复杂列表滚动时丢帧率高达30%。
自动合并 16ms 内的 UI 更新指令，减少跨线程通信次数

类型映射

基础类型（数字/字符串）直接转换，复杂对象（如数组/字典）通过序列化传输

线程隔离模型

JS 线程与 UI 主线程分离，避免阻塞用户交互.UI 主线程是 Native 层的原生线程，而 JS 线程是 React Native 运行时创建的独立线程。两者的分离设计既保障了原生平台的交互流畅性，又为 JavaScript 动态逻辑提供了执行环境。
在这里插入图片描述
☆ ☆ ☆通过 JSON 序列化异步通信，JS 线程将 UI 更新指令发送到 Shadow 线程，再转发至 UI 主线程

JS 线程的独立性
JS 线程由 React Native 运行时创建，独立于 UI 主线程运行，主要负责：执行 JavaScript代码（如业务逻辑、React 组件渲染逻辑）；
生成虚拟 DOM 树（Element Tree）并计算布局差异
shadow线程
渲染到界面上一个很重要的步骤就是布局，我们需要知道每个组件应该渲染到什么位置，这个过程就是通过yoga去实现的，这是一个基于flexbox的跨平台布局引擎。shadow thread 会维护一个 shadow tree来计算我们的各个组件在 native 页面的实际布局，然后通过 bridge 通知native thread 渲染 ui。
native 线程（UI）
主要负责原生渲染和调用原生能力；

性能瓶颈分析

序列化开销

复杂参数（如大数组）的 JSON 序列化耗时占总通信时间的 70%+，实测 1MB 数据序列化延迟可达 30ms。

单线程队列阻塞

高并发场景（如列表快速滚动）导致消息堆积，Android 设备平均延迟达 100ms+。

内存占用

每个 Bridge 实例需维护独立的消息队列和模块注册表，多页面应用内存开销增加 20%-30%

2. 新架构组件和设计理念

好文推荐：React Native 新架构：性能提升的全面解析

React Native 新架构通过 Fabric、Turbo Modules、JSI 和 Codegen 四大支柱重构了底层体系，实现了从异步桥接到原生能力直连的跨越式升级：
在这里插入图片描述

Fabric架构的突破性创新（渲染引擎）

1. 并发渲染体系

• 优先级调度
通过 RenderPass机制 将渲染任务分为：
• High Priority：交互动画（如滑动列表）
• Normal Priority：常规布局更新
• Low Priority：预加载内容
实测复杂动画场景下的丢帧率降低40%。

2. 分层渲染技术

• LayerTree结构
将UI拆分为 Surface/Canvas/Text 等独立渲染层，支持局部更新。例如文本内容变更时，仅重绘Text层而非整个View。

• 内存共享优化
采用 SharedArrayBuffer 实现跨线程数据共享，减少60%的内存拷贝。如在处理4K图像时，显存占用从120MB降至50MB。

3. 原生渲染管线

• Compositor组件
将渲染指令转化为 Metal（iOS）/Vulkan（Android） 的GPU指令，实现跨平台的高效合成。例如，圆角阴影效果通过GPU着色器而非CPU计算实现。

JSI（JavaScript Interface）

☆ ☆ ☆ JS 线程通过 JSI 直接持有 Native 对象引用，支持同步调用 Native 方法，减少通信延迟

1.同步直连机制

通过C++实现的 JavaScript Interface (JSI) ，允许JS直接持有Native对象引用：

// JSI绑定示例
jsi::Function::createFromHostFunction(runtime,jsi::PropNameID::forAscii(runtime, "nativeMethod"),2,[](jsi::Runtime& rt, const jsi::Value& thisVal, const jsi::Value* args, size_t count) {// 直接调用原生方法nativeModule->method(args[0].asString(rt).utf8(rt));return jsi::Value::undefined();}
);