Fabric渲染流程

如果你说的是React Native 新架构里的 Fabric Renderer它的核心渲染链路可以概括成React Component ↓ React Reconciler ↓ Shadow Tree ↓ Commit ↓ Mount ↓ Fabric Renderer ↓ Native View / UIKit / Android View ↓ 屏幕显示更完整一点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 层例如View style{{ width: 100, height: 100 }} TextHello/Text /ViewReact 首先进行 reconciliationReact Element ↓ Fiber Tree ↓ Reconciliation这里主要回答React 状态变化以后哪些组件发生了变化2. Shadow TreeFabric 的核心之一是Shadow Tree。可以理解成 JS/React 世界和真正 Native View 之间的一层React │ ▼ Shadow Tree │ ▼ Native View例如ShadowTree └── View ├── Text └── ImageShadow Node 会保存props state layout event handlers children component type注意Shadow Node ≠ 真正的 UIView / Android View。它更像是 Native UI 的“声明式描述”。3. LayoutFabric 使用 Yoga 计算布局Shadow Tree ↓ Yoga ↓ x y width height例如View width: 100 height: 100 margin: 10最终得到LayoutMetrics x 10 y 20 width 100 height 100所以可以简单理解Props ↓ Shadow Node ↓ Yoga Layout ↓ LayoutMetrics4. Commit这是 Fabric 很重要的一步。React 产生新的 Shadow Tree 后并不是马上修改 Native View。而是Old Shadow Tree New Shadow Tree ↓ Diff ↓ Mutations例如旧View ├── Text(Hello) └── Image新View ├── Text(World) └── ImageFabric 可以发现Text props/text changed然后生成类似Update Text这样的 mutation。5. MountCommit 得到 mutations 后进入 Mount 阶段。例如Create Insert Update Delete可以理解成Shadow Tree Diff ↓ Mutation List ↓ Mounting ↓ Native View比如Create View Create Text Insert Text into View Update Text最终才真正操作UIView Android View一张图理解 FabricReact │ ▼ React Fiber │ ▼ ┌─────────────────┐ │ Shadow Tree │ │ │ │ ShadowNode │ │ ShadowNode │ │ ShadowNode │ └────────┬────────┘ │ ▼ Yoga │ ▼ Layout Metrics │ ▼ Commit │ ▼ Tree Diff │ ▼ Mutations / | \ Create Update Delete \ | / ▼ Mount │ ┌────────┴────────┐ ▼ ▼ iOS Android UIView View │ │ └────────┬────────┘ ▼ GPU │ ▼ ScreenFabric 最关键的三个概念如果你是在准备React Native 源码/面试建议重点理解这三个概念解决什么问题Shadow Tree描述 UICommit计算 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 源码下一步最值得顺着这条链看ReactFiber ↓ ShadowNode ↓ ShadowTree::commit() ↓ calculateMutationInstructions() ↓ MountingCoordinator ↓ MountingManager ↓ UIView / Android View这条链基本就是Fabric 源码主线。