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

react生命周期方法图

请注意，这些函数是纯函数，可以由 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 });
  };
}