基本 React 组件渲染两次，没有任何 API 数据

Question

在控制台的本地主机上，我看到我的组件被渲染了两次，但不知道为什么。 我没有使用 componentDidMount 引入任何 API，只是一个没有任何内容的基本组件。 这是预期的吗？

当我提取 API 数据时，我在控制台中获得了 4 次重新渲染，我希望在使用 componentDidMount 更新 state 时看到另一个重新渲染。

我已经看到很多与 state 更新相关的线程导致重新渲染，但无法找到任何涵盖看似基本内容的内容。

应用程序.js

import React from "react";
import Testing from "./components/Body/Testing"

function App() {

  return (

    <div className="App">

      <Testing />

    </div>
  );
}

export default App;

测试.js

import React, { Component } from 'react'

export class Testing extends Component {

    constructor(props) {
        super(props);
        this.counter = 0;
      }

    render() {

        this.counter++;
        console.log('render ' + this.counter)

        return (
            <div>Test</div>
        )

    }
}

export default Testing

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我的控制台output如下...

Answer 1

这是使用严格模式时的设计。 它的 React 的“检测意外副作用”功能。

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

从文档...

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。 这是通过有意双重调用以下函数来完成的：

Class 组件构造函数、 render和 shouldComponentUpdate 方法

所以，是的，React 正在双重渲染你的组件，以向你展示你正在做你不应该做的事情（在渲染中修改计数器）。

由于 React 无法判断你在渲染中在做什么，它认为双重渲染是将有缺陷的应用程序放入坏的 state 的最快方法。 相当漂亮！