RN 渲染原理：不依赖WebView，原生控件渲染

React Native（RN）的渲染原理可以概括为：

RN 不依赖 WebView，而是使用原生控件（Native Views）进行渲染。

具体原理如下：

1. JavaScript 层

开发者使用 JavaScript（React）编写 UI。

例如：

<View>
  <Text>Hello React Native</Text>
</View>

这里的 View、Text 并不是 HTML 标签，而是 React Native 提供的组件。

---

2. React 生成虚拟树（Virtual Tree）

React 根据 JSX 构建组件树，并通过 Diff 算法计算哪些地方发生了变化。

JSX
   │
   ▼
React Fiber
   │
   ▼
Virtual Tree

---

3. Bridge（旧架构）或 JSI/Fabric（新架构）

RN 不会把页面放进 WebView。

而是把需要创建、更新控件的信息发送给原生。

旧架构：

JavaScript
      │
      ▼
   Bridge
      │
      ▼
Native(UI)

Bridge 采用异步通信。

---

新架构（Fabric + JSI）：

JavaScript
      │
      ▼
     JSI
      │
      ▼
Fabric Renderer
      │
      ▼
Native UI

JSI 不需要传统 Bridge，通信效率更高，延迟更低。

---

4. 原生创建真正的控件

RN 最终调用的是系统原生控件，而不是浏览器 DOM。

例如：

RN组件	Android	iOS
View	android.view.View	UIView
Text	TextView	UILabel
TextInput	EditText	UITextField
Image	ImageView	UIImageView

所以用户看到的是系统真正的原生界面。

---

5. GPU 渲染

原生控件最终交给系统渲染：

RN JS
   │
React Fiber
   │
Bridge / JSI
   │
Native View
   │
Android View 或 UIView
   │
GPU
   │
屏幕

---

为什么说 RN 不依赖 WebView？

React Native 与传统 Hybrid（如早期 Cordova、PhoneGap）最大的区别就是：

React Native	WebView Hybrid
使用原生控件	使用 HTML + CSS
没有 DOM	有 DOM
不运行在浏览器	运行在 WebView 中
调用系统控件	页面由浏览器内核绘制
性能接近原生	性能受 WebView 限制

例如：

<Text>Hello</Text>

• React Native ：最终渲染为 Android 的 TextView 或 iOS 的 UILabel。

• WebView ：最终渲染为 HTML 的 <span> 或 <div>，由浏览器引擎（如 Chromium/WebKit）绘制。

因此，React Native 的核心特点就是不依赖 WebView，而是通过原生渲染引擎将 React 组件映射为平台原生控件，从而获得接近原生应用的性能和体验。