React 与 React-DOM 的关系

问题

react 和 react-dom 是什么关系？为什么要分成两个包？

解答

React 将核心功能和渲染逻辑分离成两个独立的包：

react

React 的核心库，提供构建组件所需的基础功能：

• 组件定义（函数组件、类组件）
• 状态管理（useState、useReducer）
• 生命周期和副作用（useEffect、生命周期方法）
• 其他 Hooks 和 API

react-dom

专门用于浏览器 DOM 环境的渲染库，负责：

• 将 React 组件渲染到真实 DOM
• 处理 DOM 更新和事件系统
• 提供 ReactDOM.render（React 17）或 createRoot（React 18+）等方法

使用示例

安装依赖：

npm install react react-dom

代码中使用：

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

为什么要分离？

这种设计让 React 可以适配不同的渲染环境：

• react-dom：浏览器环境
• react-native：移动端原生应用
• react-three-fiber：3D 渲染
• 其他自定义渲染器

核心逻辑（组件、状态、Hooks）保持不变，只需替换渲染层即可。

关键点

• react 是核心库，提供组件和状态管理等基础功能
• react-dom 是渲染库，负责将组件渲染到浏览器 DOM
• 分离设计使 React 可以适配多种平台（Web、Native、3D 等）
• Web 开发需要同时安装这两个包