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

Posted 2023-02-22

【中文标题】函数式组件渲染一次，类组件渲染两次

【英文标题】：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?

重点是，我还没有触及状态（我知道状态变化自然会触发组件的重新渲染）。我不明白为什么这两个程序不同，它们基本上不是一回事吗？

官方文档中已经写得很清楚了，请查收，解决你所面临的问题。

【参考方案1】：

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

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

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

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

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

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