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

facebook/react

菜单

渲染目标

相关源文件

React 旨在通过一套平台特定的渲染器将内容渲染到多种环境。本页将解释 React 的渲染架构如何工作、React 核心与平台特定代码之间的接口，以及 React 生态系统中主要的渲染目标。

渲染架构概述

React 的架构将核心协调算法与平台特定渲染逻辑分离。这种分离使得 React 能够支持多个渲染目标，同时保持一致的编程模型。

渲染器架构图

来源

Host 配置接口

每个渲染器都提供一个“host 配置”实现，用于定义 React 如何与目标平台交互。host 配置包括用于创建、更新和管理平台特定实例的方法。

核心 Host 配置接口

来源

Host 配置职责

Host 配置负责：

  1. 实例管理：创建、更新和删除平台特定实例
  2. 树操作：操作渲染树（appendChild、insertBefore、removeChild）
  3. 属性管理：将 props 应用于实例，处理更新
  4. 事件处理：管理平台事件并映射到 React 的事件系统
  5. 其他：支持文本内容、超时、微任务等功能

主要渲染目标

React 包含几个官方渲染目标：

ReactDOM

ReactDOM 是 Web 浏览器的主要渲染器，目标是 DOM（文档对象模型）。

来源

主要功能

  • 与标准 DOM 元素和浏览器 API 协同工作
  • 包含浏览器特定优化和事件处理
  • 支持 DOM 特定功能，如样式、表单元素和可访问性

ReactNative

ReactNative 支持将 React 组件渲染到原生移动平台（iOS、Android）。

来源

主要功能

  • 通过 UIManager 桥接与原生平台通信
  • 使用 React Native 的视图系统管理原生视图实例
  • 处理平台特定属性和事件

ReactFabric (React Native Fabric)

ReactFabric 是使用 C++ Fabric 渲染系统构建的现代 React Native 渲染器。

来源

主要功能

  • 使用更高效的 C++ 渲染基础设施
  • 与原生平台直接通信（无需 JSON 序列化）
  • 比传统 ReactNative 渲染器具有更好的性能特性

测试渲染器

React 包含两个测试渲染器：

  1. ReactTestRenderer：创建渲染树的纯 JavaScript 表示
  2. ReactNoop：“无操作”渲染器，用于测试协调器本身

来源

Host 配置实现细节

实例类型和属性管理

每个渲染器都为其管理的平台特定实例定义自己的类型

渲染器实例类型容器类型文本实例
ReactDOMDOM 元素DOM 元素/文档/片段文本节点
ReactNativeReactNativeFiberHostComponent带有 containerTag 的容器对象数字（tag）
ReactFabric带有 node 和 canonical 属性的对象根容器带有 node 属性的对象
ReactTestRenderer带有 type、props 和 children 的对象带有 children 数组的对象带有 text 属性的对象

来源

所有渲染器共有的方法

所有渲染器都实现协调器使用的这些关键方法：

创建和初始设置

createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle)
createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle)
appendInitialChild(parentInstance, child)
finalizeInitialChildren(instance, type, props, hostContext)

更新和变异

appendChild(parentInstance, child)
insertBefore(parentInstance, child, beforeChild)
removeChild(parentInstance, child)
commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle)
commitTextUpdate(textInstance, oldText, newText)

来源

协调器如何连接到渲染

React 协调器计算更新并通过 host 配置接口调用渲染器。

更新流程图

来源

使用自定义渲染器扩展 React

React 的架构允许为任何目标平台创建自定义渲染器。这些自定义渲染器使用与官方渲染器相同的 host 配置接口。

自定义渲染器模式

来源

自定义渲染器必须实现与官方渲染器相同的 host 配置接口，包括：

  1. 平台特定原始类型的类型定义
  2. 实例创建和管理
  3. 属性更新
  4. 树结构管理
  5. 事件处理（如果适用）

总结

React 中的渲染目标是通过平台特定渲染器实现的，这些渲染器与核心协调算法共享一个通用接口。这种架构允许 React 针对多个平台，同时保持一致的编程模型。

每个渲染器都实现一个 host 配置，它定义了 React 如何与目标平台交互，包括创建实例、管理属性和处理事件。官方渲染器（ReactDOM、ReactNative、ReactFabric、ReactTestRenderer）涵盖了最常见的用例，但该架构也支持用于其他平台的自定义渲染器。

有关特定渲染目标的更多信息，请参阅：