React 和 React-DOM 的关系

问题

React 和 React-DOM 是什么关系？为什么要分成两个包？

解答

React 和 React-DOM 是两个独立的包，各自负责不同的职责：

react 是核心库，包含 React 的基础功能：组件定义、状态管理、生命周期等。它与平台无关，只负责描述 UI 应该是什么样子。

react-dom 是渲染器，专门负责将 React 组件渲染到浏览器 DOM 中。它提供了 ReactDOM.render（React 17）或 createRoot（React 18+）等方法。

这种分离设计让 React 可以适配不同平台，比如 React Native 使用 react-native 渲染器，而不是 react-dom。

使用示例

安装依赖：

npm install react react-dom

基本用法：

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

const App = () => {
  return <h1>Hello, React!</h1>;
};

// React 18+ 写法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

关键点

• react 负责组件逻辑，与平台无关
• react-dom 负责浏览器 DOM 渲染
• 分离设计使 React 可以跨平台使用（Web、Native、VR 等）
• Web 开发需要同时安装两个包