功能组件渲染一次，类组件渲染两次

Question

所以，我用 create-react-app 开始了这个新项目（它运行的是 react v.16.13.1）。我把基础App组件改写成一个类，发现当组件是函数的时候，像这样：

function App() {
  console.log('App (function)');
  return 'App (function)';
}

浏览器控制台打印出来

App (function)

万分感谢！但是如果同一个 App 组件写成

class App extends React.Component {
  render() {
    console.log('App (class)');
    return 'App (class)';
  }
}

控制台写入

App (class)
App (class)

Answer 1

在最新版本的 React 中，渲染在开发中运行时使用严格模式。严格模式故意重复调用构造函数和渲染函数以更好地检测意外的副作用。

从文档（重点是我的）：

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

• 类组件构造函数、render和 shouldComponentUpdate 方法
• 类组件静态 getDerivedStateFromProps 方法
• 函数组件体
• 状态更新器函数（setState 的第一个参数）
• 传递给 useState、useMemo 或 useReducer 的函数

基于这一点，我还希望函数组件渲染两次，我们没有看到这种情况发生，但是 React 可能对此很聪明，因为没有状态。

在我的测试，在运行的生产模式并不会导致相同的双渲染类成分的。