当前位置：首页 > news >正文

React Native 原理

news 来源：原创 2025/9/8 1:42:43

React Native 是一个跨平台移动应用开发框架，它允许开发者使用 JavaScript 和 React 来开发 iOS 和 Android 原生应用。React Native 的核心原理是通过 桥接（Bridge） 技术，使用 JavaScript 来控制原生组件，并将应用逻辑与原生代码进行交互。

React Native 原理概述

React Native 的基本原理是利用 JavaScript 线程 和 原生线程 进行通信，构建跨平台的原生应用。具体来说，它采用了 虚拟 DOM 和 桥接机制，使得 JavaScript 代码与原生 UI 组件能够相互协调和交互。

以下是 React Native 的工作原理的几个关键组成部分：

1. JavaScript 线程与原生线程

React Native 将应用的逻辑（JS 代码）和 UI 渲染分配给不同的线程：

• JavaScript 线程：运行 JavaScript 代码的线程，主要用于执行业务逻辑和管理应用的状态。

• 原生线程：负责 UI 渲染和原生代码执行（例如 UIKit 或 Android Views）。这个线程会管理所有原生控件的渲染，保持 UI 的流畅性。

2. 虚拟 DOM 与 UI 渲染

React Native 使用与 React 类似的 虚拟 DOM（Virtual DOM）来管理 UI 的更新：

• 当 JS 线程发生状态变化时，React Native 会重新渲染虚拟 DOM。

• 经过差异化计算后，React Native 将更新的 UI 信息传递给原生线程。

• 原生线程通过原生控件（如 <View>、<Text>）更新应用的界面。

3. 桥接（Bridge）机制

React Native 通过桥接（Bridge）机制来实现 JavaScript 线程和原生线程之间的通信。桥接是 React Native 的核心，它使得 JavaScript 可以调用原生模块（如相机、定位、传感器等）。

• JavaScript 与原生模块的通信：通过桥接，JavaScript 线程可以向原生线程发送消息（例如发起网络请求、读取文件），并等待响应。

• 原生与 JavaScript 的回调：原生代码也可以通过桥接机制向 JavaScript 发送消息，从而触发 JavaScript 中的回调函数。

桥接的机制大致如下：

• JavaScript 线程执行应用逻辑，并通过桥接向原生线程发送调用请求。

• 原生线程执行请求，并通过桥接将结果返回 JavaScript 线程。

• JavaScript 根据结果更新虚拟 DOM，并最终更新原生 UI。

4. 原生组件与 JavaScript 组件

React Native 提供了封装好的 原生组件（如 <View>、<Text>、<Button> 等）和 JavaScript 组件（如业务逻辑组件）。这些组件都可以在应用中进行组合和使用。

• 原生组件：React Native 会将原生组件映射成原生控件。例如，<View> 在 Android 上会变成 View 控件，在 iOS 上变成 UIView 控件。

• JavaScript 组件：这些组件包含业务逻辑，React Native 会通过桥接机制与原生 UI 组件进行交互。

5. 异步执行和多线程

React Native 是基于异步编程的：

• UI 渲染线程和JS 执行线程是独立的，彼此并行工作，避免了阻塞和卡顿。

• 异步调用：大部分与原生模块的交互都是异步的，这可以避免主线程被阻塞，确保 UI 渲染的流畅性。

• 批量更新：React Native 会将一系列 UI 更新合并为一次更新，从而减少不必要的渲染，提高性能。

6. React Native 的架构图

在 React Native 的架构中，通常会有以下几个部分：

1. JS 层：

• 编写的 JavaScript 代码运行在 JavaScript 引擎（如 V8 或 JavaScriptCore）中，负责应用逻辑、状态管理、业务处理等。

2. React 层：

• React 负责 UI 的状态管理和虚拟 DOM 渲染。它与原生层通过桥接进行通信。

3. 桥接（Bridge）层：

• 充当 JavaScript 层和原生层之间的中介。所有的 JS 与原生组件的交互都通过这个桥进行。

4. 原生层：

• 包含原生 UI 组件和原生代码，直接与操作系统交互（如 UI 控件、文件系统、传感器等）。

另一个层面理解：

Java层: 主要负责 Native 的 UI 渲染和底层功能调用, Java 层的核心 jar 包是 react-native.jar, 封装了很多接口, 例如 Module, Registry, Bridge
C++层: 主要封装了 JavaScriptCore, 起到了解析 JS 代码的作用
JS 层: 利用 JS 代码去进行事件的分发和 UI 代码的编写, 主要以下几部分:

- Component: 编写 JSX 来构建虚拟 DOM
- Lifecycle: 生命周期必不可少, 可以在组件的各种时期器进行一些操作
- Layout: 使用 FlexBox 进行布局, 用 css-layout, 不依赖 DOM, 可以编译成 Native 端代码, 用于布局样式的展示, 目前不支持 CSS3

RN 现在主要有 3 个线程

JS Thread 执行线程, 负责逻辑层面的处理, Metro 将 React 源码打包成 bundle 文件, 然后传给 JS 引擎执行, 现在 IOS 和 Android 统一的是 JSC
UI Thead 主要主责原生渲染 Native UI 和调用原生能力 (Native Module)
Shadow Thead 这个线程主要创建 Shadow Tree 来模拟 React 结构树, RN 使用 Flexbox 布局, 但是原生不支持, Yoga 引擎就是将 Flexbox 布局转换为原生布局的

7. 如何实现跨平台

React Native 的跨平台特性主要依赖于以下两点：

• 组件封装：React Native 提供的核心组件是跨平台的，例如 <View>、<Text> 等，它们在 Android 和 iOS 上都能渲染为各自原生平台的 UI 控件。

• 平台差异处理：React Native 允许开发者通过 Platform API 来处理不同平台之间的差异，做出平台特定的调整。

• 例如：Platform.OS === 'ios' 用于判断当前平台是 iOS，Platform.select() 可用来为不同平台选择不同的组件或样式。

8. 开发和调试

React Native 提供了良好的开发体验：

• 热重载：React Native 支持热重载（Hot Reloading），即修改代码后，应用会立即重新加载，只更新修改过的部分，提升开发效率。

• 远程调试：开发者可以通过 Chrome 浏览器调试 JavaScript 代码，方便排查问题。

9. 原生模块和库

如果 React Native 中没有提供某些功能，开发者可以通过原生模块或第三方库来扩展 React Native：

• 原生模块：使用原生语言（Java/Kotlin 或 Objective-C/Swift）编写，暴露给 JavaScript 使用。

• 第三方库：React Native 社区有很多开源的第三方库，可以在应用中使用它们来快速实现功能。

总结

React Native 的原理通过 JavaScript 和原生代码之间的桥接实现了跨平台的能力。它通过将业务逻辑与 UI 渲染分开，采用虚拟 DOM 和异步执行机制，能够在 iOS 和 Android 上以接近原生的性能和体验运行。同时，它保持了 React 风格的声明式编程，减少了开发者的工作量。

拓展

React Native 的不足

由于 React Native 和原生交互依赖的只有一个 Bridge，而且 JS 和 Native 交互是异步的，所以对需要和 Native 大量实时交互的功能可能会有性能上的不足，比如动画效率，性能是不如原生的。

React Native 始终是依赖原生的能力，所以摆脱不了对原生的依赖，相对 Flutter 的自己来画 UI 来说，React Native 显得有些尴尬。

和其他跨端技术比较

Flutter vs React Native

开发体验

React Native 在界面开发延续了 React 开发风格，支持 css-in-js(其实就是用 js 来写 css)，而且在 0.59 版本之后支持了 React Hook 函数式编程，开发的时候大多只关心样式界面的搭建，原生能力有客户端或者 Bridge 实现。

Flutter 最大的特点在于：Flutter 是一套平台无关的 UI 框架，并且在 Flutter 里面万物皆 Widget。很多时候开发一个控件需要嵌套多个 Widget 去实现，与 JS 里面的回调地狱有点像，而这也是被吐槽代码嵌套样式难看的原因。

状态管理

React Native 和 Flutter 对于状态管理，两者有着很高的相似度，虽然内部实现很大差别，但是都可以获取 state 和 setState 的方式去更新页面的状态。

产物

React Native 产生的是 bundle 文件，实际上就是 JS 脚本文件；而 Flutter 编译后 Android 产生的主要是一些应用程序指令段、数据段，虚拟机数据段、指令段，iOS 则是 App.framework，其实也是一些原生的数据集。

原生能力 & 性能

其实两者的在这方面的区别不是很大，性能方面 React Native 稍微差一点。但是在原生灵活性上 React Native 要有优势。

JSI

javascript interface js虚拟机通用接口层，是针对JS引擎封装的上层API框架，使用JSI做JS引擎调用的优点：

1.底部可以任意替换JS引擎而不影响上层JS引擎的使用。如：可以任意替换JavaScript Core, V8等。

2.通过JSI，JavaScript可以持有C++宿主对象的引用，所以可以直接调用原生方法(UIView, NativeModule),它与现在统一使用Bridge这个通道和消息异步调用比起来，提高了消息发送的及时性，避免了消息队列执行的等待。