React组件渲染两次而不改变状态

Question

我正在渲染一个简单的React组件，其中未设置状态和属性

我在render函数内仅记录一次文本到控制台，但它被记录了两次：

rendering counter
rendering counter

以下是组件 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;

并且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();

看起来组件中的渲染函数被调用了两次。但是为什么呢？

- aaw

Answer 1

如文档所述：

严格模式无法自动检测副作用，但它可以通过使它们稍微更确定性来帮助您发现它们。 这是通过有意“双重调用”以下方法完成的:

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

- StackedQ