本文档描述了React仓库中React Native渲染器的实现。它解释了React如何通过React Native渲染器与原生移动平台交互，重点介绍了使React能够渲染到原生移动视图的内部架构和关键组件。
有关React DOM在网络浏览器中的渲染信息，请参阅React DOM。
React Native渲染器充当React虚拟DOM与原生移动平台（iOS和Android）之间的桥梁。它将React组件转换为原生UI元素并高效管理更新。React仓库包含核心渲染器实现，而React Native框架仓库则包含原生平台特定的代码。
此代码库中的React Native渲染器有两种形式：
两种渲染器都服务于相同的目的，但具有不同的架构和性能特点。
来源
React Native渲染器架构由多个层组成，它们协同工作，将React组件渲染到原生视图。核心React协调器生成更新，这些更新由传统（Paper）或Fabric渲染器处理，然后这些渲染器通过各自的UI管理器与原生平台通信。
来源
渲染过程始于React应用程序调用render()。渲染器通过协调器创建容器，该容器管理组件树。更新通过协调器流向原生平台，而事件则流回React组件。
来源
ReactNativeTypes.js文件定义了React与React Native之间的接口。它包含各种React Native概念的Flow类型定义，包括：
ViewConfig - 定义原生组件的属性和方法AttributeConfiguration - 指定可在组件上设置的属性ReactNativeType 和 ReactFabricType - 定义两个渲染器的公共API这些类型定义在整个React Native渲染器中广泛使用，以确保类型安全，并为React与原生平台之间提供清晰的契约。
来源
原生组件使用视图配置系统进行注册。每个原生组件都有一个对应的视图配置，用于指定：
视图配置系统是React与原生平台之间的契约，定义了React props如何映射到原生视图属性。
来源
传统渲染器，通常被称为"Paper"渲染器，是React Native渲染的原始实现。它采用JavaScript驱动的方法，包含以下关键组件：
render - 创建或更新组件树unmountComponentAtNode - 移除组件树findNodeHandle - 从React组件获取原生节点句柄dispatchCommand - 向原生组件发送命令sendAccessibilityEvent - 向原生组件发送可访问性事件传统渲染器通过React Native提供的UIManager模块与原生组件通信。
来源
Fabric渲染器是一种更新的实现，它通过JavaScript和原生代码之间的直接内存共享来提高性能。其关键组件包括：
render - 创建或更新组件树stopSurface（以前是unmountComponentAtNode） - 移除组件树findNodeHandle - 从React组件获取原生节点句柄dispatchCommand - 向原生组件发送命令sendAccessibilityEvent - 向原生组件发送可访问性事件getNodeFromInternalInstanceHandle - 从内部实例句柄获取原生节点getPublicInstanceFromInternalInstanceHandle - 从内部实例句柄获取公共实例Fabric渲染器通过nativeFabricUIManager模块与原生组件通信。
来源
渲染器通过以下方式管理组件的更新：
Fabric通过使用持久节点和批量更新来优化此过程，从而最大程度地减少更新UI所需的工作量。
来源
React Native组件可以接收来自JavaScript的命令。命令分发过程在两种渲染器中工作方式不同：
| 传统渲染器（Paper） | Fabric渲染器 |
|---|---|
使用UIManager.dispatchViewManagerCommand | 使用nativeFabricUIManager.dispatchCommand |
| 需要一个数字标签 | 直接对节点对象操作 |
| 同步桥接调用 | 更直接的通信 |
两种渲染器都暴露了一个dispatchCommand方法，该方法接受组件引用、命令名称和参数。
来源
React Native有两种事件类型：
事件系统将原生平台事件桥接到React事件处理程序，由渲染器处理原生事件与React合成事件之间的映射。
来源
React Native处理渲染或事件处理过程中发生的错误。两种渲染器都通过以下方式实现错误处理：
nativeOnUncaughtError - 处理渲染过程中未捕获的错误nativeOnCaughtError - 处理错误边界捕获的错误ReactFiberErrorDialog集成 - 向用户显示错误对话框错误处理允许React Native应用程序从错误中恢复，并在出现问题时向用户提供反馈。
来源
下表总结了传统（Paper）和Fabric渲染器之间的主要区别：
| 功能 | 传统渲染器（Paper） | Fabric渲染器 |
|---|---|---|
| 根标签 | 使用LegacyRoot | 使用ConcurrentRoot |
| 节点表示 | 数字标签 | 对象引用 |
| 更新机制 | 通过UIManager更新 | 通过nativeFabricUIManager更直接地更新 |
| 性能 | JavaScript驱动 | 通过共享内存更多地由原生驱动 |
| 线程模型 | 单线程 | 支持多线程 |
| 同步 | 需要JS与原生之间的同步 | 通过共享内存实现更好的同步 |
| 未来支持 | 正在弃用 | 积极的开发重点 |
Fabric代表着对传统渲染器的重大架构改进，通过与原生平台更直接的集成，带来了更好的性能。
来源
React Native提供了与原生组件交互的实用工具，包括：
findHostInstance_DEPRECATED - 查找组件的主机实例findNodeHandle - 获取组件的原生节点句柄measure - 测量组件的布局measureInWindow - 测量组件在窗口中的位置measureLayout - 测量组件相对于另一个组件的布局这些实用工具帮助弥合React组件与原生UI元素之间的差距，从而实现高级交互和布局管理。
来源
React Native渲染器通过主机配置与React协调器集成，该配置实现了特定于平台的操作，例如：
这种集成允许React的核心协调算法与原生移动平台配合工作，从而在移动设备上实现React的组件模型和协调优势。
来源
React仓库中的React Native渲染器在React的虚拟DOM与原生移动平台之间架起了一座关键桥梁。通过其两种实现——传统渲染器（Paper）和Fabric渲染器，它使React组件能够渲染到原生视图，同时保持React的声明式编程模型和高效更新。
Fabric代表了React Native渲染的未来方向，通过与原生平台更直接的集成，性能得到了提升。两种渲染器共享相似的API，但在内部实现和性能特点上有所不同。
了解React Native渲染器架构对于开发高性能React Native应用程序以及为React Native生态系统做出贡献至关重要。