在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

facebook/react-native

菜单

iOS 组件渲染

相关源文件

此页面解释了 React Native 在 iOS 上渲染组件的方式，涵盖了从 JavaScript 到 UIKit 视图的组件渲染管道。它侧重于组件如何在 iOS 上创建、挂载、更新和管理。有关 Android 渲染的信息，请参阅 Android UI Components。

目的与范围

本文档描述了 React Native 在 iOS 上的渲染系统，包括：

  • JavaScript React 组件如何映射到原生 iOS 视图
  • 渲染管道的架构
  • 组件如何在视图层级中创建、更新和挂载
  • 旧版渲染与 Fabric（新架构）渲染之间的区别

iOS 渲染管道概述

React Native 的 iOS 渲染系统将 JavaScript 中定义的 React 组件转换为原生 iOS UIKit 视图。该管道包含多个协同工作的层，以创建和更新 UI。

来源

组件视图架构

React Native iOS 组件构建在一个视图类的层级结构之上，这些类实现了 RCTComponentViewProtocol。此协议定义了创建、更新和管理组件视图的方法。

来源

组件视图注册表和回收

React Native 维护一个组件视图注册表，以高效管理视图的创建和重用。 RCTComponentViewRegistry 负责此管理。

来源

渲染过程

1. 初始化

该过程始于 RCTAppDelegate，它设置了 React Native 环境并创建了初始根视图。

来源

2. Surface 设置（Fabric 架构）

在 Fabric 架构中，Surface 代表一个 React 根视图并管理组件树的生命周期。

来源

3. 组件创建和挂载

当 React 渲染或更新组件时，原生端会创建和更新相应的原生视图。

来源

Shadow 视图变更

React Native 渲染的核心是 Shadow 视图变更的概念。这些是描述视图层级更改的操作。

有五种主要的变更类型：

变更类型描述实现细节
创建创建新的组件视图从注册表中分配或重用组件视图
删除移除组件视图将视图返回到重用池
插入将视图添加到父级在父级的子级数组中的特定索引处添加子视图
删除从父级中移除视图移除子视图中的特定索引
更新更新视图属性可以更新 props、state、布局或事件发射器

来源

组件视图更新

当组件需要更新时，React Native 通过几个更新方法将更改应用于原生视图。

更新过程有两个阶段：

  1. 属性更新：更新单个属性，如 props、state、布局指标。
  2. 最终确定：调用 finalizeUpdates: 方法，并提供一个掩码来指示更新了哪些方面。

来源

布局动画

React Native 通过 LayoutAnimationKeyFrameManager 支持布局更改的动画。此系统会拦截视图变更并应用动画。

来源

无桥接架构（新架构）

新架构引入了“无桥接”模式，该模式使用直接 JavaScript 接口 (JSI) 而不是桥接。

在无桥接模式下：

  • RCTHost 替换 RCTBridge
  • 组件通过 Fabric 渲染器直接创建
  • 通信通过 JSI 进行，无需序列化/反序列化开销

来源

性能考量

React Native 的 iOS 渲染系统包含多项优化以提高性能：

  1. 视图回收：尽可能重用组件视图以减少分配。
  2. 批量更新：将多个 UI 更新批量处理。
  3. 主线程执行：所有 UI 操作都在主线程上进行，以避免线程问题。
  4. 增量挂载：大型更新可以分解为具有不同优先级的块。
  5. 组件视图描述符：缓存组件视图类的信息以优化创建。

来源

与 iOS 应用生命周期的集成点

React Native 通过多个入口点与 iOS 应用生命周期集成。

来源

调试和错误处理

React Native 提供了多个实用工具来调试 iOS 上的渲染问题。

  1. 断言框架：RCTAssert 宏有助于捕获编程错误。
  2. 验证系统：newArchitectureValidation 系统有助于识别与新架构不兼容的代码。
  3. RedBox 错误显示：错误可以显示在红色框中以便于调试。
  4. 堆栈帧解析：JS 堆栈跟踪会被解析并以可读的格式显示。

来源