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, // child node
	 	domNode // DOM node outside the root element
);

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

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

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

react-dom/服务器
react-dom/客户端

ReactDOMServer

服务器模块将用于在服务器中渲染一个 react 组件，该模块可以导入，如下所示 -


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

ReactDOMServer提供的一些方法如下 -

renderToPipeableStream（） - 将反应组件渲染到其初始 HTML 并返回一个管道流。
renderToReadableStream（） - 将 react 组件渲染到其初始 HTML，并通过 promise 返回可读的 Web 流。
renderToStaticNodeStream（） - 将react组件渲染到其初始HTML并返回一个可读的nodejs流，该流输出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 节点作为应用程序的 root 调用。返回的 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）并将我们的你好组件附加到 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 组件将附加到两个根元素，如下所示 -

ReactDOMClient

总结

ReactDOM 通过将 react 组件附加到客户端和服务器环境中的 HTML 文档中，提供了为 react 应用程序创建入口点的能力。

打印本页