为什么在使用组件策略时会调用react中的render函数两次？

Question

我是新来的反应，什么来理解为什么console.log在渲染函数内部被调用两次？

import React, { Component } from "react";
import "./App.css";

class App extends Component {

  render() {
    console.log("Prints twice in console");
    return (
      <div className="App">

      </div>
    );
  }
}

export default App;

如果我不从组件扩展，而是使用功能，控制台只打印一次

import React from "react";
import "./App.css";
function App() {
  console.log("prints once");
  return <div className="App"></div>;
}

export default App;

Answer 1

在./src目录中检查您的index.js。我认为它将应用程序组件呈现在

<React.StrictMode>

删除它，它将停止渲染函数两次。

你也可以检查这个