函数式组件渲染一次，类组件渲染两次答案

【问题标题】：Functional component renders once, class component renders twice函数式组件渲染一次，类组件渲染两次
【发布时间】：2020-07-14 01:56:19
【问题描述】：

所以，我使用 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)

【问题讨论】：

这能回答你的问题吗？ Why is my React component is rendering twice?
重点是，我还没有触及状态（我知道状态变化自然会触发组件的重新渲染）。我不明白为什么这两个程序不同，它们基本上不是一回事吗？
官方文档中已经写得很清楚了，请查收，解决你所面临的问题。

标签： javascript reactjs create-react-app

【解决方案1】：

在最新版本的 react 中，在开发中运行时渲染使用strict mode。严格模式故意双重调用构造函数和渲染函数to better detect unexpected side effects。

来自文档（重点是我的）：

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

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

类组件静态getDerivedStateFromProps方法

函数组件体

状态更新函数（setState 的第一个参数）

传递给 useState、useMemo 或 useReducer 的函数

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

在我的测试中，在production mode 中运行没有导致类组件的相同双重渲染。

【讨论】：