跳到主要内容

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 实现服务器端渲染。

新架构还在代码质量、性能和可扩展性方面提供了优势

  • 类型安全： 代码生成以确保 JS 和 宿主平台 之间的类型安全。代码生成使用 JavaScript 组件声明作为真理来源，以生成 C++ 结构体来保存 props。JavaScript 和宿主组件 props 之间的不匹配会触发构建错误。
  • 共享 C++ 核心：渲染器在 C++ 中实现，核心在平台之间共享。这提高了代码一致性，并使在新平台上采用 React Native 变得更容易。
  • 更好的宿主平台互操作性：同步和线程安全的布局计算改善了将宿主组件嵌入到 React Native 中的用户体验，这意味着更容易与需要同步 API 的宿主平台框架集成。
  • 性能提升：通过新的渲染器系统的跨平台实现，每个平台都受益于性能改进，这些改进可能是由一个平台的限制所驱动的。例如，视图扁平化最初是 Android 的性能解决方案，现在默认在 Android 和 iOS 上都提供。
  • 一致性：新的渲染系统是跨平台的，因此更容易在不同平台之间保持一致性。
  • 更快的启动速度：宿主组件默认情况下是延迟初始化的。
  • 减少 JS 和宿主平台之间的数据序列化：React 过去常常以序列化的 JSON 格式在 JavaScript 和宿主平台之间传输数据。新的渲染器通过使用 JavaScript 接口 (JSI) 直接访问 JavaScript 值，从而改进了数据传输。