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 中。

return ReactDOM.createPortal(
    this.props.children, // 子节点
    domNode // 根元素之外的 DOM 节点
);

让我们在接下来的章节中更详细地了解门户。

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 并返回输出 HTML 字符串的可读 NodeJS 流。它跳过了额外的标记(例如 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 组件将附加到根元素，如下所示 −