Reactjs 反应类组件呈现两次

我在代码中创建了一个类组件

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import Home from "./components/home";

ReactDOM.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“/components/Home”导入主页；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

home.jsx

import React, { Component } from "react";

class Home extends Component {
  state = {};

  render() {
    console.log("Render Home");
    return <h1>Home</h1>;
  }
}

export default Home;

import React，{Component}来自“React”；
类Home扩展组件{
状态={}；
render（）{
控制台日志（“渲染主页”）；
回家；
}
}
导出默认主页；

如果我将其更改为“主”功能组件，则它只渲染一次。 但是为什么类组件呈现两次呢？

答案在于严格模式：

严格模式不能自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现副作用。这是通过故意双重调用以下函数来实现的：

• 类组件构造函数、呈现和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 功能组件体
• 状态更新程序函数（setState的第一个参数）
• 传递给useState、UseMoom或useReducer的函数

---

幸运的是，这只适用于开发模式，因此在生产环境中不会出现这种双重渲染。

尝试不使用严格模式：

ReactDOM.render(
  <Home />,
  document.getElementById("root")
);

ReactDOM.render(
,
document.getElementById（“根”）
);

好的，但即使在开发模式下，双重渲染也会弄乱我的代码。有没有办法避免这种麻烦？