ReactJS - DOM

要运行 React 应用程序，它需要将自身附加到 Web 应用程序的主文档。React 提供了一个模块来访问和将应用程序附加到文档的 DOM，该模块是 ReactDOM (react-dom)。

让我们在本节中学习如何创建一个简单的 React 组件，并使用 reactDOM 模块将该组件附加到文档中。

ReactDOM 用法

react-dom 是用于操作文档 DOM 的核心包。react-dom 允许将一个或多个 React 应用程序附加到文档。应将 react-dom 导入到应用程序中，如下所示：

import * as ReactDOM from 'react-dom';

react-dom 提供了两种操作 DOM 的方法，它们如下：

createPortal() - 在 React 应用程序中创建一个门户。门户是一个特殊的 React 节点，它使主 React 应用程序能够将其子节点渲染到 DOM 中，该 DOM 位于其自身 DOM 组件层次结构之外。

return ReactDOM.createPortal(
   this.props.children, // child node
   domNode // DOM node outside the root element
);

我们将在以后的章节中详细了解门户。

flushSync() - 立即刷新状态更改并更新 DOM。通常，React 会创建一个虚拟 DOM，然后通过分析虚拟 DOM 和真实 DOM 之间的差异来更新真实 DOM。更新频率由 React 内部确定。flushSync() 会中断并立即更新更改。

react-dom 提供了两个子模块，一个用于服务器端应用程序，另一个用于客户端应用程序。这些模块如下：

react-dom/server
react-dom/client

ReactDOMServer

服务器模块将用于在服务器上渲染 React 组件，并且可以按如下所示导入该模块：

import * as ReactDOMServer from 'react-dom/server';

ReactDOMServer 提供的一些方法如下：

renderToPipeableStream() - 将 React 组件渲染到其初始 HTML 并返回一个管道流。
renderToReadableStream() - 将 React 组件渲染到其初始 HTML 并通过 Promise 返回一个可读的 Web 流。
renderToStaticNodeStream() - 将 React 组件渲染到其初始 HTML 并返回一个可读的 Node.js 流，该流输出 HTML 字符串。它跳过额外的标记，例如 data-reactroot，并且输出将与 renderToStaticMarkup() 相同。
renderToString() - 将 React 组件渲染到其初始 HTML 并返回一个 HTML 字符串。
renderToStaticMarkup() - 与 renderToString() 相同，除了它跳过额外的标记，例如 data-reactroot。

ReactDOMClient

客户端模块将在前端开发中广泛使用，并且可以按如下所示导入到应用程序中：

import * as ReactDOM from 'react-dom/client';

ReactDOMClient 提供的一些方法如下：

createRoot() - 创建一个根元素以稍后附加和渲染 React 组件。它接受一个 HTML 元素并返回一个 React 节点。该 React 节点称为应用程序的根。返回的 React 节点将具有两种方法，render 用于渲染 React 组件，unmount 用于卸载 React 组件。

const root = createRoot(container);
root.render(element); // where element = document.getElementById('root-id')
root.umount();

hydrateRoot() - 与 createRoot() 相同，但它与 react-dom/server 模块结合使用以水化在服务器上渲染的 React 组件。

应用 ReactDOMClient

首先，创建一个新的 React 应用程序并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，在组件文件夹下（src/components/Hello.js）创建一个 React 组件 Hello。

import React from "react";
class Hello extends React.Component {
   constructor(props) {
      super(props)
   }
   render() {
      return (
         <div>Hello, {this.props.name}</div>
      );
   }
}
export default Hello;

接下来，打开 index.html (public/index.html) 并添加一个新的容器 (root2)，如下所示：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta name="description" content="Web site created using create-react-app" />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <title>React App</title>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div style="padding: 10px;">
         <div id="root"></div>
         <div id="root2"></div>
      </div>
   </body>
</html>

接下来，打开 index.js (src/index.js) 并将我们的 hello 组件附加到 root 和 root2 容器中，如下所示：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Hello from './Components/Hello';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <React.StrictMode>
      <Hello name="Main root container" />
   </React.StrictMode>
);
const root2 = ReactDOM.createRoot(document.getElementById('root2'));
root2.render(
   <React.StrictMode>
      <Hello name="Another root container" />
   </React.StrictMode>
);
reportWebVitals();`

最后，在浏览器中打开应用程序并检查结果。React 组件将附加到两个根元素，如下所示：

总结

ReactDOM 提供了在客户端和服务器环境中通过将 React 组件附加到 HTML 文档中来创建 React 应用程序入口点的方法。

打印页面