react native 实现原理

jialiang808 · 2025-10-23 11:28:33 发布

React Native 是一个允许开发者使用 JavaScript 和 React 语法构建跨平台原生移动应用的框架，其核心目标是在保持接近原生应用性能的同时，实现 "一次编写，多端运行"。它的实现原理可以从架构设计、渲染流程和跨语言通信三个核心层面来理解：

React Native 的架构主要分为三层，通过 "桥接（Bridge）" 实现各层通信：

JavaScript 层开发者编写的业务逻辑、React 组件（JSX）、状态管理等都运行在这一层。
- 代码通过 React 框架处理，最终生成虚拟 DOM（Virtual DOM）（描述 UI 结构的 JavaScript 对象）。
- 包含 React Native 提供的基础组件（如 View、Text）的 JS 抽象层，这些组件对应原生平台的组件。
桥接层（Bridge）这是 JS 层与原生层通信的核心，负责实现两种不同语言（JS 和原生代码）的交互。
- 工作方式：采用异步批量通信机制。JS 层和原生层不会直接调用对方的 API，而是通过消息队列传递序列化后的 JSON 数据（类似 HTTP 协议的请求 / 响应模式）。
- 数据流转：
  - JS 层将渲染指令（如 "创建一个文本框"）或事件处理逻辑序列化后，通过桥接层发送到原生层。
  - 原生层执行指令后，将结果（如用户点击事件）序列化后，通过桥接层回传给 JS 层。
原生层对应具体平台（iOS/Android）的原生代码（iOS 用 Objective-C/Swift，Android 用 Java/Kotlin）。
- 包含 React Native 预实现的原生组件映射（如 View 对应 iOS 的 UIView、Android 的 ViewGroup）。
- 负责最终的 UI 渲染、设备能力调用（如相机、定位）、系统事件处理（如手势、生命周期）。

React Native 的渲染过程可以简化为以下步骤：

JSX 转化为虚拟 DOM开发者编写的 JSX 代码（如 <Text>Hello</Text>）被 Babel 编译为 React 函数调用（React.createElement(Text, null, 'Hello')），最终生成描述 UI 结构的虚拟 DOM 对象（纯 JS 对象）。
虚拟 DOM 到原生渲染指令React 框架通过 diff 算法对比前后虚拟 DOM 的差异，生成最小化的更新指令（如 "新增一个 Text 组件"），并将这些指令通过桥接层传递给原生层。
原生层渲染原生层的 "UI 管理器"（如 iOS 的 RCTUIManager、Android 的 UIManagerModule）解析指令，调用对应平台的原生 API 创建或更新真实 UI 组件（如 iOS 的 UILabel、Android 的 TextView），最终在屏幕上渲染出结果。
事件反向传递当用户与原生 UI 交互（如点击按钮）时，原生层会捕获事件，将事件信息（如坐标、类型）序列化后，通过桥接层传递给 JS 层，触发对应的 React 事件处理函数（如 onPress）。

传统架构的桥接层存在异步通信延迟、数据序列化开销大等问题。为此，React Native 推出了新架构（自 v0.68 起逐步稳定），核心改进包括：

Fabric（新 UI 管理器）
- 允许 JS 层直接访问原生组件的引用（通过 "同步渲染"），减少桥接通信次数。
- 支持并发渲染（类似 React 18 的并发特性），优先处理用户交互等高频事件。
TurboModules（新原生模块系统）
- 原生模块在启动时懒加载，减少初始化时间。
- 允许 JS 层直接调用原生方法（通过静态类型生成，避免序列化），提升通信效率。
JSI（JavaScript Interface）取代传统的桥接层，允许 JS 直接持有原生代码的引用（如 C++ 函数指针），实现同步通信，彻底消除 JSON 序列化开销。

对比 Cordova/PhoneGap：后者通过 WebView 渲染网页（HTML/CSS），性能较低；React Native 直接调用原生组件渲染，性能接近纯原生。
对比 Flutter：Flutter 自带渲染引擎（Skia），完全绕过原生组件；React Native 依赖平台原生组件，更贴近系统 UI 风格。

总结来说，React Native 的核心原理是：用 React 语法在 JS 层描述 UI 和逻辑，通过桥接层（或新架构的 JSI）将指令传递给原生层，最终由原生组件渲染出接近原生体验的界面。这一设计既保留了 JS 的开发效率，又兼顾了移动应用的性能需求。