Fabric渲染流程

如果你说的是 React Native 新架构里的 Fabric Renderer，它的核心渲染链路可以概括成：

sql 复制代码

React Component
      ↓
React Reconciler
      ↓
Shadow Tree
      ↓
Commit
      ↓
Mount
      ↓
Fabric Renderer
      ↓
Native View / UIKit / Android View
      ↓
屏幕显示

更完整一点：

sql 复制代码

JS Thread
┌─────────────────────────────────────┐
│ React Component                     │
│        ↓                            │
│ React Reconciler                    │
│        ↓                            │
│ C++ Shadow Tree                     │
└──────────────┬──────────────────────┘
               │ Commit
               ↓
┌─────────────────────────────────────┐
│ Fabric C++                          │
│                                     │
│ Shadow Tree                         │
│    ↓                                │
│ Tree Diff                           │
│    ↓                                │
│ Mutation Instruction                │
│    ↓                                │
│ Mounting Layer                      │
└──────────────┬──────────────────────┘
               │
        create / update / delete
               ↓
┌─────────────────────────────────────┐
│ Native Platform                     │
│                                     │
│ iOS: UIView / CALayer               │
│ Android: View / ViewGroup            │
└─────────────────────────────────────┘

1. React 层

例如：

xml 复制代码

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

React 首先进行 reconciliation：

markdown 复制代码

React Element
    ↓
Fiber Tree
    ↓
Reconciliation

这里主要回答：

React 状态变化以后，哪些组件发生了变化？

2. Shadow Tree

Fabric 的核心之一是 Shadow Tree。

可以理解成 JS/React 世界和真正 Native View 之间的一层：

sql 复制代码

React
  │
  ▼
Shadow Tree
  │
  ▼
Native View

例如：

markdown 复制代码

ShadowTree
└── View
    ├── Text
    └── Image

Shadow Node 会保存：

bash 复制代码

props
state
layout
event handlers
children
component type

注意：

Shadow Node ≠ 真正的 UIView / Android View。

它更像是 Native UI 的"声明式描述"。

3. Layout

Fabric 使用 Yoga 计算布局：

arduino 复制代码

Shadow Tree
     ↓
Yoga
     ↓
x
y
width
height

例如：

makefile 复制代码

View
width: 100
height: 100
margin: 10

最终得到：

ini 复制代码

LayoutMetrics

x = 10
y = 20
width = 100
height = 100

所以可以简单理解：

复制代码

Props
  ↓
Shadow Node
  ↓
Yoga Layout
  ↓
LayoutMetrics

4. Commit

这是 Fabric 很重要的一步。

React 产生新的 Shadow Tree 后，并不是马上修改 Native View。

而是：

markdown 复制代码

Old Shadow Tree
       +
New Shadow Tree
       ↓
     Diff
       ↓
Mutations

例如：

旧：

scss 复制代码

View
 ├── Text("Hello")
 └── Image

新：

scss 复制代码

View
 ├── Text("World")
 └── Image

Fabric 可以发现：

scss 复制代码

Text
  props/text changed

然后生成类似：

scss 复制代码

Update Text

这样的 mutation。

5. Mount

Commit 得到 mutations 后进入 Mount 阶段。

例如：

sql 复制代码

Create
Insert
Update
Delete

可以理解成：

markdown 复制代码

Shadow Tree Diff
       ↓
Mutation List
       ↓
Mounting
       ↓
Native View

比如：

sql 复制代码

Create View
Create Text
Insert Text into View
Update Text

最终才真正操作：

objectivec 复制代码

UIView
Android View

一张图理解 Fabric

sql 复制代码

                 React
                   │
                   ▼
              React Fiber
                   │
                   ▼
          ┌─────────────────┐
          │  Shadow Tree     │
          │                 │
          │ ShadowNode      │
          │ ShadowNode      │
          │ ShadowNode      │
          └────────┬────────┘
                   │
                   ▼
                Yoga
                   │
                   ▼
             Layout Metrics
                   │
                   ▼
                Commit
                   │
                   ▼
              Tree Diff
                   │
                   ▼
              Mutations
             /     |      \
          Create Update   Delete
             \     |      /
                   ▼
                Mount
                   │
          ┌────────┴────────┐
          ▼                 ▼
        iOS               Android
       UIView              View
          │                 │
          └────────┬────────┘
                   ▼
                 GPU
                   │
                   ▼
                 Screen

Fabric 最关键的三个概念

如果你是在准备 React Native 源码/面试，建议重点理解这三个：

概念	解决什么问题
Shadow Tree	描述 UI
Commit	计算 UI 应该怎么变化
Mount	把变化真正应用到 Native View

一句话：

Fabric 不是"React 直接操作 Native View"，而是 React 产生新的 Shadow Tree → Commit 做 Tree Diff → 生成 Mutations → Mount 阶段把 Mutations 应用到 Native View。

另外，Fabric 和旧架构最大的区别之一，就是它把 UI 描述、计算和 Native View 操作 更明确地拆开，并且核心渲染管线大量下沉到 C++。

如果你是在看 React Native Fabric 源码，下一步最值得顺着这条链看：

css 复制代码

ReactFiber
   ↓
ShadowNode
   ↓
ShadowTree::commit()
   ↓
calculateMutationInstructions()
   ↓
MountingCoordinator
   ↓
MountingManager
   ↓
UIView / Android View

这条链基本就是 Fabric 源码主线。