Skip to content

Fabric 架构

· 5 min

欢迎来到架构概述！ 如果您开始使用 React Native，请参阅指南部分。继续阅读以了解 React Native 的内部工作原理！

本部分正在进行修订中，未来将会添加更多的内容。请确保今后随时再回来查看新内容。

架构概述旨在分享 React Native 内部如何工作的概念性概述。受众的目标群体包括第三方库作者和核心贡献者。如果您是应用程序开发人员，则无需熟悉此部分内容即可有效使用 React Native。不过此部分内容仍然能带给你一些好处，它能够让你更加深入了解 React Native 的工作原理。

目录

渲染相关

  • Fabric 架构
  • 渲染、提交和挂载
  • 实现跨平台
  • 扁平化视图
  • 线程模型

Fabric 架构#

Fabric 是 React Native 的新渲染系统，是传统渲染系统的概念演变。其核心原则是在 C++ 中统一更多的渲染逻辑，提高与主机平台的互操作性，并解锁 React Native 的新功能。从 2018 年开始进行新渲染器的开发，到了 2021 年，React Native 已经开始使用新渲染器。

本文档将会对新渲染器进行一个概述，并介绍其中的一些相关概念。本小节不会包含任何的代码，会介绍一些在不同场景中渲染管道的关键概念、动机以及好处。

使用新渲染器的动机以及好处#

创建新的渲染架构是为了解锁一些旧架构无法提供的更好的用户体验。其中包括以下的一些场景：

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

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

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

  • 在 React Native 上启用 React 并发功能。

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

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

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

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

  • 更好的主机平台互操作性：同步和线程安全的布局计算改善了将原生组件嵌入 React Native 时的用户体验，这意味着更容易与需要同步 API 的主机平台框架集成。

  • 改进的性能：随着渲染器系统新的跨平台实现，每个平台都会受益于这样的性能改进，这可能是由一个平台的限制所推动的。例如，视图扁平化最初是 Android 的一种性能解决方案，现在 Android 和 iOS 都默认提供。

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

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

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

术语解释： JavaScript Interfaces (JSI)：将 JavaScript 引擎嵌入 C++ 应用程序的轻量级 API。 Fabric 使用它在 Fabric 的 C++ 核心和 React 之间进行通信。