跳至主内容

Fabric

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Fabric 是 React Native 的全新渲染系统，是旧版渲染系统的概念演进。其核心原则是将更多渲染逻辑统一到 C++ 中，提升与宿主平台的互操作性，并为 React Native 解锁全新能力。该项目始于 2018 年，2021 年起 Facebook 应用中的 React Native 已全面采用新渲染器。

本文档概述了新渲染器的核心概念，不涉及具体平台实现细节，也不包含代码片段或技术指引。内容涵盖关键概念、设计动机、核心优势以及不同场景下的渲染流程解析。

新渲染器的设计动机与核心优势​

新渲染架构旨在实现旧架构无法支持的优质用户体验，典型案例如下：

  • 通过增强宿主视图与 React 视图的互操作性，渲染器可实现同步测量与渲染。在旧架构中，React Native 的异步布局机制导致嵌入_宿主视图_时会出现布局"跳动"问题

  • 支持多优先级与同步事件处理，可确保高优先级用户交互得到及时响应

  • 集成 React Suspense 机制，提供更符合直觉的数据获取方案

  • 在 React Native 中启用 React 并发特性

  • 更简易地实现 React Native 服务端渲染

新架构在代码质量、性能表现和可扩展性方面同样具备显著优势：

  • 类型安全：通过代码生成机制，确保 JavaScript 与宿主平台间的类型一致性。该机制以 JavaScript 组件声明为数据源生成 C++ 结构体存储属性，JavaScript 与宿主组件属性不匹配时将触发构建错误

  • 共享 C++ 核心：渲染器采用 C++ 实现，核心代码跨平台共享，既提升一致性又降低新平台适配成本

  • 更优的宿主平台互操作性：同步且线程安全的布局计算机制，显著提升宿主组件嵌入 React Native 时的用户体验，尤其简化了需同步 API 的宿主框架集成

  • 性能提升：跨平台实现的渲染系统使所有平台共享性能优化成果。例如视图扁平化技术最初为解决 Android 性能问题设计，现已在 Android/iOS 平台默认启用

  • 一致性保障：跨平台渲染系统天然确保多平台表现一致性

  • 更快启动速度：宿主组件默认启用延迟初始化机制

  • 减少 JS 与宿主平台间的数据序列化：旧版 React 需通过 JSON 序列化传输数据，新渲染器借助 JavaScript 接口（JSI）直接访问 JavaScript 值实现高效数据传输