1- 通过 React 来构建界面
第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的 react 和 react-dom，可以把 18 替换成所需加载的版本号。
-
react.js：React中的核心库文件。// 开发版 https://unpkg.com/react@18/umd/react.development.js // 生产版 https://unpkg.com/react@18/umd/react.production.min.js -
react-dom.js：提供了能在HTML中操作真实DOM的API。// 开发版 https://unpkg.com/react-dom@18/umd/react-dom.development.js // 生产版 https://unpkg.com/react-dom@18/umd/react-dom.production.min.js
注意：以上两个文件可以通过浏览器打开，另存为并保存至目录lib中即可，lit目录文件如下。
|-lib
| |-react.development.js
| |-react.production.min.js
| |-react-dom.development.js
| |-react-dom.production.min.js 第2步：新建一个HTML页面，在页面中引入react相关文件，并在body中创建一个用于显示React内容的空标签div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 加载 React。--><!-- 注意1: 打包部署时，需将 "development.js" 替换为 "production.min.js"。--><!-- 注意2: react-dom.js依赖于react.js，所以要先引入react.js，后引入react-dom.js"。--><!-- 引入react的核心库 --><script src="./lib/react.development.js"></script><!-- 提供了能在HTML中操作真实DOM的`API` --><script src="./lib/react-dom.development.js"></script>
</head>
<body><!-- 这个 <div> 加上唯一的 id HTML 属性，该 div 即是展示 React 内容的容器！ --><div id="root"></div>
</body>
</html>
第3步：在 </body> 结束标签之前通过 React 实现 Hello World
<script>// ReactDOM 来自react-dom.development.js。// 通过createRoot函数，将 id 为 root 的 div 作为呈现 React 内容的容器。const root = ReactDOM.createRoot(document.getElementById('root'));// 在容器中呈现 Hello, world!root.render("Hello, world!");</script>
</body>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./lib/react.development.js"></script><script src="./lib/react-dom.development.js"></script>
</head>
<body><div id="root"></div><script>const root = ReactDOM.createRoot(document.getElementById('root'));root.render("Hello, world!");</script>
</body>
</html>
2- render 注意事项
-
允许在同一个界面中指定多个挂载容器
<body><div id="root"></div><div class="my"></div> <script>{// 将 id 为 root 的元素作为 React 容器const root = ReactDOM.createRoot(document.querySelector("#root"));// 将 class 为 my 的元素作为 React 容器const my = ReactDOM.createRoot(document.querySelector(".my"));// 在 root 容器中渲染字符串 rootroot.render("root");// 在 my 容器中渲染字符串 mymy.render("my");}</script> </body> -
同一个挂载位置，可以执行多次 render ，后者会覆盖掉前者的内容
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{const root = ReactDOM.createRoot(document.querySelector("#root"));// 渲染字符串 oneroot.render("one");// 渲染字符串 two root.render("two");}</script> </body> -
同一个挂载位置，不允许多次被指定为 React 容器
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{// 将 id 为 root 的元素作为 React 容器，赋值给常量 rootconst root = ReactDOM.createRoot(document.querySelector("#root"));// 再次将 id 为 root 的元素作为 React 容器，赋值给常量 root2const root2 = ReactDOM.createRoot(document.querySelector("#root"));root.render("one");root2.render("two");}</script> </body>注意：以上代码会以下警告：
Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it. -
不要将 html 元素作为 React 容器
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{const root = ReactDOM.createRoot(document.documentElement);root.render("html")}</script> </body>注意：以上代码会以下警告：
Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <html>. -
不要将 body 元素作为 React 容器
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{const root = ReactDOM.createRoot(document.body);root.render("body")}</script> </body>注意：以上代码会以下警告：
Warning: createRoot(): Creating roots directly with document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try using a container element created for your app. -
可以使用链式调用
<body><!-- 展示 React 内容的容器 --><div id="root"></div><script>{ReactDOM.createRoot(document.querySelector("#root")).render("字符串")}</script> </body>
3- 卸载 React 容器
<body><button>卸载</button><div id="root"></div><script>const root = ReactDOM.createRoot(document.querySelector("#root"));const btn = document.querySelector("button");root.render(1024);btn.onclick = function(){root.unmount();}</script>
</body>
](https://img-blog.csdnimg.cn/direct/86e748ed4aaf4653a22f22c9700b7f03.png)