Skip to main content

Fabric

Fabric 是 React Native 的新渲染系统，是传统渲染系统的概念演变。核心原则是在 C++ 中统一更多渲染逻辑，提高与 主机平台 的互操作性，并解锁 React Native 的新功能。Facebook 应用中的 React Native 于 2018 年开始开发，并于 2021 年得到新渲染器的支持。

¥Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and to unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.

本文档概述了 新渲染器 及其概念。它避免了平台细节，并且不包含任何代码片段或指针。本文档涵盖了关键概念、动机、优点以及不同场景下渲染管道的概述。

¥This documentation provides an overview of the new renderer and its concepts. It avoids platform specifics and doesn’t contain any code snippets or pointers. This documentation covers key concepts, motivation, benefits, and an overview of the render pipeline in different scenarios.

新渲染器的动机和好处​

¥Motivations and Benefits of the new renderer

渲染架构的创建是为了解锁更好的用户体验，这是旧架构无法实现的。一些例子包括：

¥The render architecture was created to unlock better user experiences that weren’t possible with the legacy architecture. Some examples include:

  • 通过改进 主持人观点 和 React 视图之间的互操作性，渲染器能够同步测量和渲染 React 表面。在旧版架构中，React Native 布局是异步的，这会导致在宿主视图中嵌入 React Native 渲染视图时出现布局“跳转”问题。

    ¥With improved interoperability between host views and React views, the renderer is able to measure and render React surfaces synchronously. In the legacy architecture, React Native layout was asynchronous which led to a layout “jump” issue when embedding a React Native rendered view in a host view.

  • 通过支持多优先级和同步事件，渲染器可以对某些用户交互进行优先级排序，以确保及时处理它们。

    ¥With support of multi-priority and synchronous events, the renderer can prioritize certain user interactions to ensure they are handled in a timely manner.

  • 与 React Suspense 集成 允许在 React 应用中更直观地设计数据获取。

    ¥Integration with React Suspense which allows for more intuitive design of data fetching in React apps.

  • 在 React Native 上启用 React 并发特性。

    ¥Enable React Concurrent Features on React Native.

  • 更容易实现 React Native 的服务器端渲染。

    ¥Easier to implement server side rendering for React Native.

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

¥The new architecture also provides benefits in code quality, performance, and extensibility:

  • 类型安全：代码生成以确保跨 JS 和 主机平台 的类型安全。代码生成使用 JavaScript 组件声明作为事实来源来生成 C++ 结构来保存 props。JavaScript 和主机组件 props 之间的不匹配会触发构建错误。

    ¥Type safety: code generation to ensure type safety across the JS and host platforms. The code generation uses JavaScript component declarations as source of truth to generate C++ structs to hold the props. Mismatch between JavaScript and host component props triggers a build error.

  • 共享 C++ 核心：渲染器用 C++实现，核心在平台之间共享。这提高了一致性，并使在新平台上采用 React Native 变得更加容易。

    ¥Shared C++ core: the renderer is implemented in C++ and the core is shared among platforms. This increases consistency and makes it easier to adopt React Native on new platforms.

  • 更好的主机平台互操作性：将主机组件嵌入到 React Native 中时，同步且线程安全的布局计算可改善用户体验，这意味着可以更轻松地与需要同步 API 的主机平台框架集成。

    ¥Better Host Platform Interoperability: Synchronous and thread-safe layout calculation improves user experiences when embedding host components into React Native, which means easier integration with host platform frameworks that require synchronous APIs.

  • 改进的性能：通过渲染器系统的新跨平台实现，每个平台都可以从性能改进中受益，而性能改进可能是由于某个平台的限制而引起的。例如，视图扁平化最初是 Android 的性能解决方案，现在 Android 和 iOS 上都默认提供。

    ¥Improved Performance: With the new cross-platform implementation of the renderer system, every platform benefits from performance improvements that may have been motivated by limitations of one platform. For example, view flattening was originally a performance solution for Android and is now provided by default on both Android and iOS.

  • 一致性：新的渲染系统是跨平台的，更容易保持不同平台之间的一致性。

    ¥Consistency: The new render system is cross-platform, it is easier to keep consistency among different platforms.

  • 更快的启动：默认情况下，主机组件是延迟初始化的。

    ¥Faster Startup: Host components are lazily initialized by default.

  • JS 和宿主平台之间数据的序列化较少：React 用于在 JavaScript 和主机平台之间以序列化 JSON 的形式传输数据。新的渲染器通过使用 JavaScript 接口 (JSI) 直接访问 JavaScript 值来改进数据传输。

    ¥Less serialization of data between JS and host platform: React used to transfer data between JavaScript and host platform as serialized JSON. The new renderer improves the transfer of data by accessing JavaScript values directly using JavaScript Interfaces (JSI).