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
通信	Bridge	JSI
线程	异步	更同步
UI管理	UIManager	Fabric Renderer
布局	Native/UIManager	C++ Yoga
节点	Native Shadow Tree	C++ Shadow Tree
更新	批量Bridge消息	Commit Mutation
React Concurrent	不支持	支持

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）的核心入口。