React DOM 是 React 针对 DOM 的特定渲染器，它使 React 组件能够与 Web 浏览器的文档对象模型 (DOM) 交互。它实现了必要的主机配置 API，并提供了 DOM 特定功能，以桥接 React 的虚拟 DOM 与浏览器的实际 DOM。
有关使用 React DOM 进行服务器端渲染的信息，请参阅 React Fizz 和 React 服务器组件。有关 React DOM 事件系统的详细信息，请参阅 DOM 事件系统。
React DOM 是使用 React 构建的 Web 应用程序的主要渲染器。它将 React 组件、元素和状态更改转换为高效的 DOM 操作。
React DOM 实现了 React 协调器所需的主机环境接口，提供了 DOM 特定的方法用于：
来源
React DOM 由几个关键模块组成，它们协同工作以提供 DOM 渲染功能：
| 组件 | 目的 |
|---|---|
ReactDOM | 主要入口点，暴露顶层 API，如 render、createRoot 和 hydrate |
ReactFiberConfigDOM | 主机配置接口的 DOM 特定实现 |
ReactDOMComponent | 处理 DOM 组件操作，如设置属性 |
ReactDOMEventListener | 管理 React 合成事件系统 |
ReactDOMUpdatePriority | 处理 DOM 更新的调度优先级 |
来源
React DOM 实现了 React 协调器所需的主机配置接口。该实现主要由 ReactFiberConfigDOM 提供，它定义了 React 如何与浏览器 DOM 交互。
React DOM 定义了几种类型来表示虚拟 DOM 中的 DOM 元素：
这些类型将 React 的内部表示映射到相应的 DOM 元素。
来源
当协调器需要实例化新组件时，React DOM 会创建实际的 DOM 元素。
该实现处理：
script 和 select来源
React DOM 支持变动操作，以响应 React 组件更新来更新 DOM。
| 操作 | 功能 | 目的 |
|---|---|---|
| 创建 | createInstance() | 创建新的 DOM 元素 |
| 更新 | commitUpdate() | 更新元素属性 |
| 文本更新 | commitTextUpdate() | 更新文本内容 |
| 插入 | appendChild(), insertBefore() | 将元素添加到 DOM |
| 删除 | removeChild() | 从 DOM 中移除元素 |
这些操作经过优化，以最大限度地减少 DOM 交互。
来源
来源
React DOM 实现了一个复杂的事件系统，该系统规范化了不同浏览器之间的事件，并提供了事件委托和合成事件等附加功能。
React DOM 使用事件委托，将大多数事件监听器附加到根 DOM 容器，而不是单个元素。当事件冒泡到容器时，React 会识别应该处理事件的 React 组件，并向其分派一个合成事件。
事件系统：
来源
React DOM 为事件分配了不同的优先级，这有助于确定相关更新应以多快的速度处理。
这种优先级划分对于确保响应式交互同时高效地批处理不那么关键的更新至关重要。
来源
React DOM 支持 View Transitions API，允许在 UI 的不同状态之间进行平滑动画。
视图过渡系统通过以下方式实现不同 UI 状态之间的过渡：
来源
来源
React DOM 旨在与 React 协调器无缝协作，后者处理 React 组件的核心更新逻辑。
协调器在协调过程中的特定点调用 React DOM 的主机配置函数：
来源
React DOM 提供上下文信息，以帮助协调器对元素做出适当的决策。
此上下文有助于特殊元素（如 SVG 和 MathML）的命名空间处理。
来源
React DOM 专门为 Web 浏览器设计，但 React 的架构允许有多个针对不同平台的渲染器。
React 在不同平台之间保持一致的 API，同时实现特定于平台的渲染器。
| 渲染器 | 目标平台 | 主要区别 |
|---|---|---|
| React DOM | Web 浏览器 | 使用浏览器 DOM API |
| React Native | 移动（iOS/Android） | 使用原生 UI 组件 |
| React 测试渲染器 | 测试 | 内存中表示 |
| React Art | Canvas/SVG | 图形导向 API |
每个渲染器都实现了相同的主机配置接口，但具有特定于平台的行为。
来源
来源
React DOM 包含多项优化，以确保高效的 DOM 操作和响应式用户界面。
React DOM 批处理 DOM 变动，以最大限度地减少布局抖动并提高性能。
事件系统使用委托来最大限度地减少事件监听器的数量
来源
React DOM 是 React 的虚拟 DOM 与浏览器实际 DOM 之间必不可少的桥梁。它提供了所有 DOM 特定的实现细节，使 React 能够高效地创建、更新和管理 Web UI。通过实现 React 协调器所需的主机配置接口，React DOM 使 React 的组件模型能够在 Web 浏览器中无缝工作，同时优化性能和开发者体验。