RN 的Fabric 渲染流程是 React Native 新架构New Architecture的核心部分。相比旧架构Bridge UIManagerFabric 最大变化是JS 不再通过异步 Bridge 创建 Native View使用JSI 直接通信引入Shadow TreeC使用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 TextHello/Text /View ) }React 执行React Element | ↓ Fiber NodeReact Fiber 负责diffreconciliationscheduling注意这里还没有创建 Android View / iOS UIView。3. React Fiber 进入 Fabric RendererReact Native 有自己的 Renderer旧React | UIManager | Bridge | NativeFabricReact | Fabric Renderer | C Shadow TreeReact 调用createInstance()例如View/对应ViewComponentDescriptor | | ShadowNode4. 创建 Shadow TreeFabric 最大的变化引入 C Shadow Tree。例如React:View Text/ /ViewFabric 内部ShadowTree RootShadowNode | | ViewShadowNode | | TextShadowNode每个节点ShadowNode { type props children layoutMetrics }例如ViewShadowNode { width:100, height:50, backgroundColor:red }5. Layout计算Fabric 使用Yoga Layout Engine计算widthheightposition例如ReactView style{{ width:100, height:50 }} /进入Yoga | | LayoutMetrics结果{ x:0, y:0, width:100, height:50 }保存在ShadowNode.layoutMetrics6. Commit阶段核心Fabric 的核心React Fiber | | Commit | | ShadowTree Commit生成New Shadow Tree例如旧Root View | Text更新Root View | Text | ImageFabric 不直接修改 Native View。而是生成新的 TreeOld Tree ↓ New Tree ↓ Diff7. 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例如iOSTextShadowNode ↓ RCTText ↓ UILabelAndroidTextShadowNode ↓ ReactTextView ↓ TextView9. Native View创建Fabric 使用ComponentDescriptor负责ShadowNode | | Native View例如View:ViewComponentDescriptor | | RCTViewText:TextComponentDescriptor | | RCTTextView10. 完整流程图JS App/ | | React Fiber | | Fabric Renderer | | JSI | | C Shadow Tree | | Create ShadowNode | | Yoga Layout | | Commit | | Calculate Mutation | | Mounting Layer | | Create Native View | | 屏幕显示Fabric 和旧架构区别旧架构Fabric通信BridgeJSI线程异步更同步UI管理UIManagerFabric Renderer布局Native/UIManagerC Yoga节点Native Shadow TreeC Shadow Tree更新批量Bridge消息Commit MutationReact Concurrent不支持支持Fabric 为什么更快1. 去掉 Bridge JSON 序列化旧JS JSON Bridge Native大量serialize deserialize copyFabricJS | JSI | C直接调用。2. C Shadow Tree布局和diff从 Java/ObjC移动到C减少跨语言调用。3. 支持 Concurrent ReactReact 可以Render 暂停 恢复 丢弃 重新计算例如用户输入高优先级列表渲染低优先级可以打断。Fabric源码关键模块RN源码ReactCommon/react/renderer主要core/ | |-- ShadowNode |-- ShadowTree |-- Mounting |-- LayoutableShadowNode | components/ | |-- view |-- text |-- image关键类ShadowNodeShadowNode.h代表JS组件节点。ShadowTreeShadowTree.h管理整棵树。MountingCoordinatorMountingCoordinator.cpp生成Mount任务。UIManagerFabric版本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的核心入口。