React本地开发时,组件为啥会渲染两次

原因是因为使用了StrictMode ,

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

StrictMode 目前有助于:

  1. 识别不安全的生命周期 {#identifying-unsafe-lifecycles}
  2. 关于使用过时字符串 ref API 的警告 {#warning-about-legacy-string-ref-api-usage}
  3. 关于使用废弃的 findDOMNode 方法的警告
    {#warning-about-deprecated-finddomnode-usage}
  4. 检测意外的副作用 {#detecting-unexpected-side-effects}
  5. 检测过时的 context API {#detecting-legacy-context-api}
  6. 确保可复用的 state {#ensuring-reusable-state}

注意:
严格模式检查仅在开发模式下运行;它们不会影响生产构建。

知道了原因之后,问题就很好解决了,我们只需要将StrictMode注释掉即可,如下所示。(一般是在index.js文件中使用)

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    {/*  */}
      <App />
    {/*  */}
  </BrowserRouter>
);
reportWebVitals();


你可能感兴趣的:(React,js,前端,react.js,javascript,前端)