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

【问题标题】：Basic React component rendering twice without any API data基本 React 组件渲染两次，没有任何 API 数据
【发布时间】：2020-08-25 08:43:56
【问题描述】：

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

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

我已经看到很多与状态更新相关的线程导致重新渲染，但找不到任何涵盖看似如此基本的东西的内容。

App.js

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

function App() {

  return (

    <div className="App">

      <Testing />

    </div>
  );
}

export default App;

Testing.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')
);

我的控制台输出如下...

【问题讨论】：

呃，this.counter 是什么？这不是道具，也不是状态......这可能不是导致重新渲染的原因吗？不要使用那个奇怪的count 变量，只需使用console.count。
不，这不是导致重新渲染的原因，我把它放在那里是为了说明发生了什么。我可以取出构造函数，它也是一样的。
向我们展示您如何渲染应用程序？简单的 DOM 挂载？
@Panther ..我已经添加了我的 index.js，没有什么特别的。就像我创建应用程序时一样。我补充一下，我使用 React 的时间不长 :)
您应该尝试删除Strict 模式，看看是否会发生同样的情况。这是“严格模式”的副作用

标签： javascript reactjs components render rerender

【解决方案1】：

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

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

来自文档...

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

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

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

由于 React 无法判断您在渲染中正在做什么，它认为双重渲染是让有缺陷的应用程序进入不良状态的最快方法。很漂亮！

【讨论】：