基本的React组件在没有任何API数据的情况下渲染两次。

Question

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

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

我看到了很多关于状态更新导致重渲染的帖子，但无法找到任何关于这种基本问题的帖子。

应用程序.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

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

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

Answer 1

这是使用Strict模式时的设计。其React的 "检测意外副作用 "功能。

https:/reactjs.orgdocsstrict-mode.html#detecting-unexpected-side-effects。

从文档中...

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

Class component constructor, 渲染和shouldComponentUpdate方法

所以呀，React正在双重渲染你的组件，让你知道你正在做你不应该做的事情（在渲染中修改计数器）。

由于React无法判断你在render中做了什么，所以它认为双重渲染是让一个错误的应用程序进入糟糕状态的最快方法。相当精巧!