跳到主要内容

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 Interfaces (JSI)直接访问 JavaScript 值，改进了数据传输。