React中文官网已经搬迁了，原网址内容将不再更新

用户1272076

发布于 2024-01-31 14:36:44

1770

发布于 2024-01-31 14:36:44

文章被收录于专栏：张培跃张培跃

1- React 官网改变

注意1：React中文官网已经搬迁至-https://zh-hans.react.dev，原网址内容将不再更新

注意2：React官网已经将React的定义由“用于构建用户界面的 JavaScript 库”更改为“用于构建 Web 和原生交互界面的库”。

2- 通过 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>

3- 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 容器中渲染字符串 root
           root.render("root");
           // 在 my 容器中渲染字符串 my
           my.render("my");
      }
   </script>
</body>

同一个挂载位置，可以执行多次 render ，后者会覆盖掉前者的内容

<body>
   <!-- 展示 React 内容的容器 -->
   <div id="root"></div>
   <script>
      {
           const root = ReactDOM.createRoot(document.querySelector("#root"));
           // 渲染字符串 one
           root.render("one");
           // 渲染字符串 two
           root.render("two");
      }
   </script>
</body>

同一个挂载位置，不允许多次被指定为 React 容器

<body>
   <!-- 展示 React 内容的容器 -->
   <div id="root"></div>
   <script>
      {
           // 将 id 为 root 的元素作为 React 容器，赋值给常量 root
           const root = ReactDOM.createRoot(document.querySelector("#root"));
           // 再次将 id 为 root 的元素作为 React 容器，赋值给常量 root2
           const 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>

4- 卸载 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>

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-01-31，如有侵权请联系?cloudcommunity@tencent.com 删除

容器