ReactJS Class 组件渲染两次

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

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

Answer 1

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

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

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

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

这些函数是：

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

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

ReactJS Class 组件渲染两次

ReactJS Class Component Rendering Twice

javascript

render

reactjs