React Native 原理

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 风格的声明式编程，减少了开发者的工作量。