菜单

Fabric 在 Android 上的挂载

相关源文件

介绍

Fabric 在 Android 上的挂载是指 React Native 的 C++ 核心将 UI 更新应用到 Android UI 框架的系统。它是至关重要的桥梁,将 Fabric 渲染器产生的阴影树(shadow tree)突变转换为 Android 视图层级结构中的实际视图操作。

本文档涵盖了 React Native 中的 UI 组件如何在 Fabric 渲染器下在 Android 上渲染、更新和管理的架构和流程。有关 Fabric 渲染的通用信息,请参阅 新旧架构对比,有关特定于 iOS 的挂载,请参阅 iOS 组件渲染

来源

挂载架构

Fabric 挂载系统在三个领域之间建立桥梁:

  1. React 阴影树 (C++)
  2. 原生挂载基础设施 (C++ 和 Java)
  3. Android 视图层级结构 (Java)

挂载流程中的关键组件

  1. FabricMountingManager (C++):接收来自 React 核心的阴影树突变,并将其转换为可由 Java 层处理的挂载项。

  2. FabricUIManager (Java):作为 Java 端挂载流程的中央协调器。它调度 UI 更新,管理 Surface,并将实际的视图操作委托给 MountingManager。

  3. MountItemDispatcher:负责批处理和分发挂载项,以便由 MountingManager 执行。

  4. MountingManager:负责执行挂载项,在 Android UI 层级结构中创建、更新和删除视图。

  5. ComponentViewRegistry:维护一个已创建的所有 React Native 视图的注册表。

来源

挂载项类型和处理

挂载项是 Fabric 中 UI 操作的基本单元。它们代表需要应用于视图层级结构的特定操作。

挂载项执行流程

C++ 端将阴影树突变转换为挂载项,然后由 Java 端处理这些挂载项。

  1. 批处理:将挂载项收集到批次中,以最大程度地减少 UI 线程的工作量。
  2. 调度:FabricUIManager 将这些批次调度到 UI 线程上执行。
  3. 分发:MountItemDispatcher 将挂载项发送到 MountingManager。
  4. 执行:MountingManager 执行每个挂载项,修改实际的 Android 视图。

来源

视图创建和管理

当组件挂载时,系统会创建相应的 Android 视图。

  1. React 中的组件名称会映射到相应的 Android 视图类。
  2. 通过 ComponentViewFactory 创建视图的新实例。
  3. 属性会被应用到视图上。
  4. 视图会被插入到层级结构中。

视图复用

为了提高性能,React Native 可以复用视图,而不是每次都创建新的视图。

主要视图类型及其作用

视图类型角色主要功能
ReactViewGroup基础容器视图裁剪、z-index、指针事件
ReactTextView文本渲染文本样式、测量、截断
ReactScrollView垂直滚动容器滚动事件、吸附点、惯性
ReactHorizontalScrollView水平滚动容器与 ReactScrollView 相同,但方向为水平
ReactImageView图像渲染加载状态、缩放、着色

来源

裁剪和视图优化

React Native 中一项重要的性能优化是视图裁剪。removeClippedSubviews 属性允许组件从视图层级结构中移除位于可见区域之外的视图。

裁剪的工作原理

视图实现了 ReactClippingViewGroup 接口来支持此功能,这对于大型列表和滚动视图尤为重要。

来源

同步 UI 更新

在某些情况下,React Native 需要立即更新 UI,而无需等待下一个渲染周期。这通过 synchronouslyUpdateViewOnUIThread 方法来处理。

这对于需要以 60fps 运行的动画尤为重要,因为它会绕过正常的批处理机制。

来源

性能监控和优化

Fabric 挂载系统包含广泛的性能监控功能。

  1. DevToolsReactPerfLogger:收集提交时间、布局持续时间和挂载操作的统计信息。
  2. 批处理:挂载项以批次形式处理,以最大限度地减少 UI 线程交互的次数。
  3. 延迟布局:复杂操作可能会推迟到 UI 线程不那么繁忙时执行。

出现性能问题时,会记录指标以帮助识别瓶颈。

来源

处理特殊组件类型

不同的 React Native 组件在挂载过程中需要特殊的处理。

文本组件

文本组件拥有复杂的渲染管道,包括:

  1. 计算文本布局指标
  2. 创建和管理文本跨度
  3. 处理文本内的内联视图和图像

来源

ScrollView 组件

ScrollView 组件处理:

  1. 滚动位置和惯性
  2. 嵌套视图和裁剪
  3. 滚动事件和到 JavaScript 的回调

来源

结论

Android 上的 Fabric 挂载系统是 React 组件模型与 Android UI 框架之间的一个复杂桥梁。它能够高效地将 JavaScript 组件的更新转换为原生视图操作,同时通过批处理、视图复用和裁剪来优化性能。

理解这个系统对于诊断渲染性能问题和实现与 React Native 架构良好集成的复杂 UI 组件至关重要。