React 组件渲染被调用两次而不改变状态答案

【问题标题】：React component render called twice without changing stateReact 组件渲染被调用两次而不改变状态
【发布时间】：2020-07-05 11:55:42
【问题描述】：

我正在渲染一个简单的反应组件，其中没有设置状态和道具

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

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

好像组件中的render函数被调用了两次。但这是为什么呢？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

正如docs所写：

严格模式无法自动为您检测副作用，但可以通过使它们更具确定性来帮助您发现它们。这是通过故意double-invoking 使用以下方法完成的：

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

【讨论】：