import React, { Component } from "react";

// 全局变量，用于记录组件渲染次数
var renderTimes = 0;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
    };
  }

  handleClick = () => {
    this.setState({ count: 1 });
  };

  render() {
    console.info("---renderTimes---", renderTimes);
    renderTimes += 1;

    return (
      <div>
        <h3>场景复现：</h3>
        <p>每次点击“设置”按钮，当前组件的状态都会被设置成相同的数值。</p>
        <p>当前组件的状态: {this.state.count}</p>
        <p>
          当前组件发生渲染的次数：
          <span style={{ color: "red" }}>{renderTimes}</span>
        </p>
        <div>
          <button onClick={this.handleClick}>设置</button>
        </div>
      </div>
    );
  }
}

export default App;

在本地开发环境下，点击设置，renderTimes会直接从1跳到3，这是因为react本地运行的时候是在严格模式下，不过，官网也说了，这仅适用于开发模式，在生产模式下，不会重复调用生命周期。

React在严格模式下会执行两次render以帮忙检查额外的副作用。-----sf某友
https://blog.csdn.net/weixin_43297321/article/details/108231573?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.no_search_link&spm=1001.2101.3001.4242.1

如果不知道这个设定，可能在运行效果的时候对自己产生怀疑，不想使用严格模式，直接修改index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  // <React.StrictMode> 注释掉这里就可以了
  <App />,
  // </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

也有群友说

react 文档有明文说明，不要在 render 里处理副作用和突变一些值

如果是这样，平常还是按着文档来吧