react navite 跨端核心原理

光影少年

29人浏览 · 2026-07-03 11:59:25

光影少年 · 2026-07-03 11:59:25 发布

React Native 的跨端核心原理，可以总结为一句话：

JavaScript 负责业务逻辑，Native（Android/iOS）负责真正的 UI 和系统能力，两者通过通信机制协同工作。

下面我按照从底层到上层的方式讲解，这也是大厂面试经常会问到的内容。

一、React Native整体架构

React Native运行时主要由三部分组成：

                React Native

           JavaScript Runtime
           （Hermes/V8/JSC）
                  │
                  │
        React Fiber(Reconciler)
                  │
                  │
      JS Interface（Bridge / JSI）
        ╱                    ╲
 Android Native         iOS Native
(View、Button...)      (UIView...)

主要分为：

JS层
通信层
Native层

二、JS层（React）

这一层就是我们平时写的代码。

例如

function App() {
  return (
    <View>
      <Text>Hello</Text>
      <Button title="Click" />
    </View>
  );
}

其实这里：

<View>

不是HTML

也不是DOM

而只是一个React Element。

React经过Fiber计算以后，会生成：

Virtual Tree

例如：

App

 ├── View
 │
 ├── Text
 │
 └── Button

然后告诉Native：

我要创建一个View

我要创建一个Text

三、Native层

真正显示页面的是：

Android

android.view.View

TextView

Button

ImageView

iOS

UIView

UILabel

UIButton

UIImageView

所以：

React Native没有浏览器。

没有DOM。

没有CSS。

最终都是Native控件。

例如：

<Text>Hello</Text>

Android

TextView.setText("Hello")

iOS

UILabel.text="Hello"

四、Bridge（经典架构）

React Native最开始的核心就是Bridge。

架构如下：

JS Thread
      │
      │ JSON
      ▼
-----------------------
Bridge
-----------------------
      ▲
      │
Native Thread

JS不能直接调用Java。

也不能直接调用Objective-C。

所以Bridge负责：

序列化

例如：

JS：

<Button title="登录" />

Bridge发送：

{
  "type":"createView",
  "class":"Button",
  "props":{
      "title":"登录"
  }
}

Native收到：

UIButton

创建出来。

Bridge存在的问题

Bridge全部走JSON。

例如：

JS

↓

JSON

↓

Native

↓

JSON

↓

JS

问题：

大量：

JSON解析
序列化
线程切换

比如：

列表1000项：

1000次Bridge

动画：

60fps

Bridge

Bridge

Bridge

Bridge...

性能开始下降。

因此RN后来重构了架构。

五、JSI（现在的新架构）

React Native 0.68+ 以后基本都在使用：

JSI

JavaScript Interface

最大的改变：

JS可以直接调用C++对象。

以前：

JS

↓

Bridge

↓

Native

现在：

JS

↓

JSI

↓

C++

↓

Android/iOS

没有JSON。

没有Bridge。

例如：

JS

↓

C++ Function

↓

Java

直接调用。

速度提升很多。

六、TurboModule

以前：

所有Native Module：

App启动

↓

全部初始化

例如：

Camera

Storage

GPS

Image

Location

Clipboard

即使没用，也初始化。

启动慢。

TurboModule：

懒加载。

例如：

第一次：

Camera.open()

才初始化：

Camera Module

其它模块：

不用

↓

不初始化

优点：

启动快
内存少

七、Fabric（新的UI架构）

旧版：

React

↓

Bridge

↓

UIManager

↓

Native View

新版：

React Fiber

↓

Fabric

↓

C++

↓

Native View

Fabric特点：

同步更新。

例如：

以前：

setState()

↓

Bridge

↓

下一帧

现在：

setState()

↓

Fabric

↓

同步Commit

更加接近React DOM。

八、Hermes引擎

以前：

RN默认：

JavaScriptCore

后来Meta开发：

Hermes。

特点：

启动快
内存少
Bytecode
GC优化

流程：

JS

↓

Hermes Compiler

↓

Bytecode

↓

运行

不像浏览器：

JS

↓

Parser

↓

AST

↓

解释

Hermes直接运行Bytecode。

启动速度明显提升。

九、React Native渲染流程

完整流程：

React代码

↓

JS Runtime(Hermes)

↓

React Fiber

↓

计算Diff

↓

生成Mutation

↓

Fabric

↓

Native UI

↓

Android/iOS绘制

整个流程：

JS

↓

Fiber

↓

Diff

↓

Fabric

↓

Native

↓

GPU

↓

屏幕

十、事件回传

点击按钮：

Android Button

用户点击：

Native

↓

JSI

↓

JS

↓

onPress

例如：

<Button
    onPress={()=>{
        console.log("点击")
    }}
/>

实际上：

Native Event

↓

Event Dispatcher

↓

JS Runtime

↓

onPress()

十一、跨端能力来自哪里？

很多人误以为：

React Native 是把网页打包成 App。

其实不是。

RN真正跨端的是：

React组件

↓

不同平台对应不同实现

例如：

<View />

Android：

android.view.View

iOS：

UIView

React代码不用改。

底层平台实现不同。

所以：

React API

↓

统一

↓

Android实现

↓

iOS实现

十二、与其他跨端方案对比

技术	UI 渲染方式	性能	优点	缺点
React Native	原生控件渲染	⭐⭐⭐⭐☆	接近原生、生态成熟	需要维护原生模块，复杂动画仍可能涉及原生开发
Flutter	自绘渲染（Skia）	⭐⭐⭐⭐⭐	UI 一致性高、性能优秀	应用体积较大，与原生 UI 风格存在差异
WebView（Hybrid）	浏览器渲染	⭐⭐☆☆☆	开发快、Web 技术复用	性能和体验受限
小程序	宿主平台渲染	⭐⭐⭐☆☆	免安装、平台能力丰富	受平台限制，生态封闭

十三、React Native 新架构总结（面试高频）

React Native 的现代架构可以概括为：

React Fiber：负责组件渲染和 Diff 算法。
Hermes：负责执行 JavaScript，提高启动速度和运行效率。
JSI（JavaScript Interface）：取代传统 Bridge，实现 JavaScript 与 C++/Native 的直接通信，减少序列化和线程切换开销。
TurboModule：原生模块按需（懒）加载，降低启动耗时和内存占用。
Fabric：新的渲染系统，与 Fiber 深度集成，提升 UI 更新效率和并发渲染能力。
Native UI：最终由 Android 的 View/TextView 或 iOS 的 UIView/UILabel 等原生控件完成绘制。

整体流程可以简化为：

React 组件
    │
    ▼
React Fiber（计算 UI 变化）
    │
    ▼
Hermes（执行 JavaScript）
    │
    ▼
JSI（直接调用 Native/C++）
    │
    ├── TurboModule（系统能力）
    └── Fabric（UI 渲染）
           │
           ▼
Android / iOS 原生控件
           │
           ▼
GPU 渲染到屏幕

可以看到，React Native 的核心思想不是“跨平台绘制一套 UI”，而是“跨平台复用业务逻辑，由各平台渲染原生控件”。这也是它与 Flutter（自绘引擎）最大的架构区别。