UI开发：HTML页面+React组件+DOM容器

人工干智能

已于 2024-10-03 19:05:19 修改

阅读量537

点赞数 19

分类专栏： Python的高级知识文章标签：前端 python

于 2024-10-03 16:28:00 首次发布

本文链接：https://blog.csdn.net/qiy_icbc/article/details/142693025

版权

Python的高级知识专栏收录该内容

36 篇文章 0 订阅

订阅专栏

React是一个用于构建用户界面的JavaScript库，它允许开发者以组件化的方式构建复杂的前端应用。当React应用与HTML网页配合使用时，通常是将React组件渲染到HTML页面中的某个元素内。以下是一个简单的例子，说明如何在HTML网页中使用React：

1. 引入React库和相关依赖

首先，你需要在HTML页面中引入React库和ReactDOM库。这些库可以通过CDN（内容分发网络）引入，也可以通过npm/yarn等包管理工具安装。为了简单起见，这里我们使用CDN引入的方式。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>React in HTML</title>  
    <!-- 引入React库 -->  
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>  
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>  
    <!-- 引入Babel，用于将JSX转换为JavaScript -->  
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>  
<body>  
    <!-- 创建一个DOM容器，用于挂载React组件 -->  
    <div id="root"></div>  
  
    <!-- 在这里编写React代码 -->  
    <script type="text/babel">  
        // 定义一个React组件  
        function App() {  
            return (  
                <div>  
                    <h1>Hello, React!</h1>  
                </div>  
            );  
        }  
  
        // 使用ReactDOM.render方法将React组件渲染到DOM容器中  
        ReactDOM.render(<App />, document.getElementById('root'));  
    </script>  
</body>  
</html>

2. 创建React组件并渲染到DOM容器中

在上面的HTML代码中，我们首先在<head>部分引入了React库、ReactDOM库和Babel。然后，在<body>部分创建了一个<div>元素，其id属性为root，这个元素将作为React组件的挂载点。

接下来，在<script type="text/babel">标签内，我们定义了一个名为App的React组件。这个组件返回一个包含<h1>元素的<div>。最后，我们使用ReactDOM.render方法将App组件渲染到id为root的DOM容器中。

3. 运行和查看效果

将上述HTML代码保存为一个.html文件，并在浏览器中打开。你将看到页面上显示了一个包含“Hello, React!”文本的标题。

注意

生产环境：在实际部署时，应将React和ReactDOM的引入路径从development.js更改为production.min.js，以减小文件体积并提高加载速度。
Babel：Babel用于将JSX语法转换为普通的JavaScript语法，以便浏览器能够识别和执行。在上面的例子中，我们使用了Babel的standalone版本，它可以直接在浏览器中运行。但在大型项目中，通常会在构建过程中使用Babel进行转换。
组件化：React的核心理念是组件化开发。你可以将复杂的界面拆分成多个小的、可复用的组件，并通过组合这些组件来构建整个应用。

通过以上步骤，你可以轻松地在HTML网页中使用React来构建用户界面。

DOM容器

DOM容器在Web开发中，特别是在与JavaScript库或框架（如React）交互时，是一个关键概念。DOM，全称Document Object Model（文档对象模型），是一个平台无关、语言中立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM容器通常指的是HTML文档中的一个元素，这个元素被用作JavaScript代码（或库/框架）操作DOM的起点或根节点。在React等现代前端框架中，DOM容器特指那个被选中用于挂载（render）React组件的HTML元素。

理解（我们从DOM容器角度重新注释上述程序）：

上述HTML文档包含一个<div>元素作为DOM容器：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>React DOM Container Example</title>  
</head>  
<body>  
    <!-- 这个div元素就是DOM容器 -->  
    <div id="root"></div>  
  
    <!-- 引入React和ReactDOM（省略具体路径） -->  
    <script src=".../react.js"></script>  
    <script src=".../react-dom.js"></script>  
  
    <!-- 引入Babel（用于转换JSX，省略具体路径） -->  
    <script src=".../babel.min.js"></script>  
  
    <!-- 编写React代码 -->  
    <script type="text/babel">  
        function App() {  
            return (  
                <div>  
                    <h1>Hello, React!</h1>  
                </div>  
            );  
        }  
  
        // 将React组件挂载到DOM容器中  
        ReactDOM.render(<App />, document.getElementById('root'));  
    </script>  
</body>  
</html>

在这个例子中，<div id="root"></div>就是DOM容器。React应用通过ReactDOM.render方法将App组件渲染（或“挂载”）到这个容器中。这样，当React组件的状态或属性发生变化时，React会自动更新DOM容器中的内容，以保持UI与组件状态的一致性。

DOM容器特点：

选择性：DOM容器是HTML文档中通过特定选择器（如ID、类名等）选中的元素。
唯一性：在React应用中，通常每个React应用实例（或称为“根实例”）都会有一个对应的DOM容器。虽然理论上可以有多个React应用实例共享同一个DOM容器（通过特定的技术手段），但这不是常见或推荐的做法。
静态与动态：DOM容器本身在HTML文档中是静态的，但一旦与JavaScript代码（特别是React等库/框架）关联，它就可以动态地显示和更新内容。
挂载点：在React中，DOM容器被用作React组件树的挂载点。React组件树被渲染（或“挂载”）到这个容器中，从而动态地生成和更新DOM结构。