Fabric
Fabric 是 React Native 的新渲染系统,是传统渲染系统在概念上的演进。其核心原则是在 C++ 中统一更多渲染逻辑,提高与宿主平台的互操作性,并为 React Native 释放新功能。该系统于 2018 年开始开发,到 2021 年,Facebook 应用中的 React Native 已由新渲染器支持。
本文档概述了新渲染器及其概念。它避免了平台特有细节,不包含任何代码片段或指针。本文档涵盖了关键概念、动机、优势以及不同场景下渲染管道的概述。
新渲染器的动机和优势
创建此渲染架构是为了实现旧架构无法提供的更佳用户体验。例如:
- 通过改进宿主视图和 React 视图之间的互操作性,渲染器能够同步测量和渲染 React 表面。在旧架构中,React Native 布局是异步的,这导致将 React Native 渲染的视图嵌入宿主视图时出现布局“跳动”问题。
- 通过支持多优先级和同步事件,渲染器可以优先处理某些用户交互,以确保它们得到及时处理。
- 与 React Suspense 集成,这使得 React 应用程序中的数据获取设计更加直观。
- 在 React Native 上启用 React 并发特性。
- 更易于实现 React Native 的服务器端渲染。
新架构还在代码质量、性能和可扩展性方面提供了优势:
- 类型安全:通过代码生成确保 JavaScript 和宿主平台之间的类型安全。代码生成使用 JavaScript 组件声明作为事实来源,生成 C++ 结构体来存储属性 (props)。JavaScript 和宿主组件属性之间的不匹配会触发构建错误。
- 共享 C++ 核心:渲染器使用 C++ 实现,其核心在各个平台之间共享。这提高了平台之间的一致性,并使得在新平台上采用 React Native 变得更容易。
- 更好的宿主平台互操作性:同步且线程安全的布局计算在将宿主组件嵌入 React Native 时改善了用户体验,这意味着更容易与需要同步 API 的宿主平台框架集成。
- 性能提升:通过渲染系统新的跨平台实现,每个平台都受益于可能由某个平台的限制所驱动的性能改进。例如,视图扁平化最初是针对 Android 的性能解决方案,现在在 Android 和 iOS 上都默认提供。
- 一致性:新的渲染系统是跨平台的,更容易在不同平台之间保持一致性。
- 更快的启动:宿主组件默认情况下是惰性初始化的。
- 减少 JS 和宿主平台之间的数据序列化:React 过去常将 JavaScript 和宿主平台之间的数据作为序列化的 JSON 进行传输。新渲染器通过使用JavaScript 接口 (JSI) 直接访问 JavaScript 值来改进数据传输。