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中，在开发中运行时，渲染使用strict mode。严格模式故意双击构造函数和渲染函数to better detect unexpected side effects。

从文档中（重点是我的）：

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

类组件构造函数，渲染和shouldComponentUpdate方法

类组件的静态getDerivedStateFromProps方法

功能组件主体

状态更新程序功能（setState的第一个参数）

传递给useState，useMemo或useReducer的函数

基于此，我还希望函数组件能够呈现两次，这是我们看不到的事情，但是React可能很聪明，因为它没有状态。

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

功能组件呈现一次，类组件呈现两次

1 个答案: