render函数是一个生命周期函数，在“render阶段”调用

react lifecycle methods diagram
请注意，这些函数是纯函数，可以由React暂停、中止或重新启动。这意味着react可以调用render几乎任意次数，以使virtualDOM与实际DOM一致。
检测意外副作用
严格模式不能自动检测副作用，但它可以通过使副作用更加确定来帮助你发现它们。这可以通过有意地双重调用以下函数来实现：

• 类组件constructor、***render***和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 功能组件主体
• 状态更新器函数（setState的第一个参数）
• 传递给useState、useMemo或useReducer的函数
  备注：

这仅适用于开发模式。在生产模式下不会双重调用生命周期。
如果您确实希望在组件更新时获得一对一的控制台日志，则可以使用其他生命周期函数之一（如componentDidUpdate）来执行详细日志记录的副作用。

class Counter extends Component {
  state = {
    count: 0
  };

  componentDidUpdate() {
    console.log("random-text");
  }

  render() {
    return (
      <div>
        <span className={this.getBaadgeClasses()}>{this.formatCount()}</span>
        <button onClick={this.handleIncrement} className="btn btn-success m-2">
          Increment
        </button>

        {/* <ul>
          {this.state.tags.map((tag) => (
            <li key={tag}>{tag}</li>
          ))}
        </ul> */}
      </div>
    );
  }

  getBaadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };
}

创建此项目时，此项目会自动启用严格模式因此，要解决此问题，请首先打开项目中index.js文件，然后禁用严格模式
步骤1：当你打开index.js文件，然后你会看到这样的东西，

root.render(
   <React.StrictMode>
    <App />
   </React.StrictMode>
);

步骤2：现在这样做，

root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

希望这对你有帮助，谢谢

React团队在严格模式下的双重渲染过程中不再禁止控制台方法。如果你不想删除严格模式，就像@Florian Motteau提到的那样，那么你可以进入React开发工具并选中在严格模式下的第二次渲染过程中隐藏日志复选框。见下面的截图：

下面是React团队的报价，以及他们Github页面上的link to the discussion。
在严格模式下，React会调用两次渲染方法来清除潜在的副作用。在第二次渲染过程中，React会自动禁用控制台方法（例如console.log（）和console.warn（）），以减少多个重复日志的噪音。然而，这在调试过程中给开发人员造成了很多困惑，因此我们正在改变这种行为。- React团队