如何引用react-dom

引用 react-dom 的方法

在项目中引用 react-dom 通常有两种方式，具体取决于项目环境和构建工具。

通过 npm 或 yarn 安装后引用

安装 react-dom 作为项目依赖：

npm install react-dom
# 或
yarn add react-dom

在代码中通过 import 或 require 引入：

import ReactDOM from 'react-dom';
// 或
const ReactDOM = require('react-dom');

通过 CDN 直接引用

在 HTML 文件中通过 <script> 标签引入 CDN 资源：

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

生产环境建议使用压缩版本：

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

版本兼容性注意事项

确保 react-dom 的版本与 react 的版本匹配。例如，React 18 需要 react-dom@18。可以在安装时指定版本：

npm install react-dom@18

常用 API 示例

react-dom 提供核心渲染方法，例如：

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

const App = () => <h1>Hello World</h1>;
ReactDOM.render(<App />, document.getElementById('root'));

在 React 18 中推荐使用 createRoot：

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

服务端渲染引用

若需服务端渲染（SSR），需单独引入 react-dom/server：

import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);