ReactJS类组件渲染两次

Question

非常简单的例子：我的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

在控制台中，渲染总是打印两次。为什么啊？

Answer 1

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

代码：检查索引。下面的代码是js

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

反应StrictMode不能一次发现副作用，但它可以通过有意调用两次某些关键函数来帮助我们找到副作用。

这些职能是：

• 类组件构造函数、呈现和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 功能组件主体
• 状态更新程序函数（setState的第一个参数）
• 传递给useState、UseMoom或useReducer的函数

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