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 。
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/

ReactJS类组件渲染两次

1 个答案: