RN的Fabric 渲染流程

RN 的Fabric 渲染流程是 React Native 新架构（New Architecture）的核心部分。相比旧架构（Bridge + UIManager），Fabric 最大变化是：

• JS 不再通过异步 Bridge 创建 Native View

• 使用JSI 直接通信

• 引入Shadow Tree（C++）

• 使用Concurrent React 渲染模型

• Native View 创建变成同步可控的 Commit 流程

下面从 React 组件到屏幕显示完整拆解。

1. Fabric 整体架构

JavaScript | | React Renderer | | JSI | | +-----------------------+ | Fabric C++ | | | | Shadow Tree | | Shadow Node | | Layout | | Commit | +-----------------------+ | | Mounting Layer | | Native UI View (UIView / Android View)

2. React 创建组件

例如：

function App(){ return ( <View> <Text>Hello</Text> </View> ) }

React 执行：

React Element | ↓ Fiber Node

React Fiber 负责：

• diff

• reconciliation

• scheduling

注意：

这里还没有创建 Android View / iOS UIView。

3. React Fiber 进入 Fabric Renderer

React Native 有自己的 Renderer：

旧：

React | UIManager | Bridge | Native

Fabric：

React | Fabric Renderer | C++ Shadow Tree

React 调用：

createInstance()

例如：

<View/>

对应：

ViewComponentDescriptor | | ShadowNode

4. 创建 Shadow Tree

Fabric 最大的变化：

引入 C++ Shadow Tree。

例如：

React:

<View> <Text/> </View>

Fabric 内部：

ShadowTree RootShadowNode | | ViewShadowNode | | TextShadowNode

每个节点：

ShadowNode { type props children layoutMetrics }

例如：

ViewShadowNode { width:100, height:50, backgroundColor:red }

5. Layout计算

Fabric 使用：

Yoga Layout Engine

计算：

• width

• height

• position

例如：

React：

<View style={{ width:100, height:50 }} />

进入：

Yoga | | LayoutMetrics

结果：

{ x:0, y:0, width:100, height:50 }

保存在：

ShadowNode.layoutMetrics

6. Commit阶段（核心）

Fabric 的核心：

React Fiber | | Commit | | ShadowTree Commit

生成：

New Shadow Tree

例如：

旧：

Root View | Text

更新：

Root View | Text | Image

Fabric 不直接修改 Native View。

而是：

生成新的 Tree：

Old Tree ↓ New Tree ↓ Diff

7. Diff Shadow Tree

比较：

Old Shadow Tree VS New Shadow Tree

产生：

Mutation List：

例如：

CREATE Text INSERT Text UPDATE Props REMOVE View

类似：

[ { type:"Create", node:"Text" }, { type:"Update", node:"View" } ]

8. Mount阶段

Commit完成后：

进入：

Mounting Layer

负责：

把 Shadow Node 映射成真实 Native View。

流程：

ShadowNode | | MountInstruction | | UIView / Android View

例如：

iOS：

TextShadowNode ↓ RCTText ↓ UILabel

Android：

TextShadowNode ↓ ReactTextView ↓ TextView

9. Native View创建

Fabric 使用：

ComponentDescriptor

负责：

ShadowNode | | Native View

例如：

View:

ViewComponentDescriptor | | RCTView

Text:

TextComponentDescriptor | | RCTTextView

10. 完整流程图

JS <App/> | | React Fiber | | Fabric Renderer | | JSI | | C++ Shadow Tree | | Create ShadowNode | | Yoga Layout | | Commit | | Calculate Mutation | | Mounting Layer | | Create Native View | | 屏幕显示

Fabric 和旧架构区别

Fabric 为什么更快？

1. 去掉 Bridge JSON 序列化

旧：

JS JSON Bridge Native

大量：

serialize deserialize copy

Fabric：

JS | JSI | C++

直接调用。

2. C++ Shadow Tree

布局和diff：

从 Java/ObjC：

移动到：

C++

减少跨语言调用。

3. 支持 Concurrent React

React 可以：

Render 暂停 恢复 丢弃 重新计算

例如：

用户输入：

高优先级

列表渲染：

低优先级

可以打断。

Fabric源码关键模块

RN源码：

ReactCommon/react/renderer

主要：

core/ | |-- ShadowNode |-- ShadowTree |-- Mounting |-- LayoutableShadowNode | components/ | |-- view |-- text |-- image

关键类：

ShadowNode

ShadowNode.h

代表JS组件节点。

ShadowTree

ShadowTree.h

管理整棵树。

MountingCoordinator

MountingCoordinator.cpp

生成Mount任务。

UIManager

Fabric版本：

FabricUIManager

负责Native挂载。

一句话总结

Fabric 的渲染流程就是：

React Fiber 产生更新 → Fabric Renderer 创建 C++ Shadow Tree → Yoga 计算布局 → Commit生成Mutation → Mounting Layer执行 → 创建/更新 Native View → 屏幕显示。

如果从源码角度看，核心链路就是：

ReactFiber ↓ RCTFabricSurface ↓ ShadowTree::commit() ↓ MountingCoordinator ↓ UIManager::mount() ↓ RCTView / Android View

这也是理解 RN 新架构（Fabric + TurboModule + JSI）的核心入口。