Javascript 在不更改状态的情况下调用两次React组件渲染

我正在渲染一个简单的react组件，其中未设置状态和道具

我在渲染函数中只将文本记录到控制台一次，但记录了两次：

rendering counter
rendering counter

下面是component counter.js的代码

import React, { Component } from "react";

class Counter extends Component {
  render() {
    console.log("rendering counter");       //this is printed two times

    return <span className={"badge m-3 badge-primary"}>counter</span>;
  }
}
export default Counter;

import React，{Component}来自“React”；
类计数器扩展组件{
render（）{
console.log（“呈现计数器”）；//打印两次
返回计数器；
}
}
导出默认计数器；

和index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Counter from "./components/counter";

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

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
导入“bootstrap/dist/css/bootstrap.css”；
从“/components/Counter”导入计数器；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

组件中的渲染函数似乎被调用了两次。但这是为什么呢？

正如书中所写：

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

• 类组件构造函数方法
• 渲染方法
• setState更新程序函数（第一个参数）
• 静态getDerivedStateFromProps生命周期
• shouldComponentUpdate方法