ReactJS 类组件渲染两次答案

【问题标题】：ReactJS Class Component Rendering TwiceReactJS 类组件渲染两次
【发布时间】：2020-10-16 11:59:20
【问题描述】：

非常简单的例子：我的 App.js 文件读取

import React from 'react';
import Test from './component/Test';

function App() {
  return (
    <div className="App">
      <Test/>
    </div>
  )
}

export default App;

我的 Test.js 文件读取

import React, { Component } from 'react'

class Test extends Component {

    render() {
        console.log('rendered')
        return null
    }
}

export default Test

在控制台中，“rendered”总是打印两次。为什么？

【问题讨论】：

另外几个 console.log 测试：App.js 函数确实只调用了一次。 Test.js componentDidMount() 也肯定被调用一次
这与我在 localhost:3000/ 上以开发模式运行应用程序有关吗？如果是这样的话，这种行为可以/应该改变吗？
这是正常的stackoverflow.com/questions/35136836/…
谢谢！我很好奇“幕后”发生了什么，即这是一种正常行为有什么好处？
我自己对它还很陌生，但有些生命周期方法会被多次调用。我认为有些是渲染、componentDidMount 等。这些都会被调用，这就是为什么 render 被调用了两次，至少据我所知。

标签： javascript reactjs render

【解决方案1】：

原因是 React.StrictMode。
React.StrictMode 是 2018 年在 16.3.0 版本中引入的包装器，在 16.8.0 中它也适用于钩子。

代码： 检查 index.js 以获取以下代码

 <React.StrictMode>
    <App />
  </React.StrictMode>

React.StrictMode 不能一下子发现副作用，但它可以帮助我们通过有意调用两次关键函数来发现它们。

这些功能是：

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

请查看此博客
https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/

【讨论】：

谢谢！这是一个很好的解释
欢迎...请接受我的回答作为最合适的回答。