React 类组件渲染两次答案

【问题标题】：React class component rendering twiceReact 类组件渲染两次
【发布时间】：2020-05-10 16:56:40
【问题描述】：

我已经在代码中创建了一个类组件。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import Home from "./components/home";

ReactDOM.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

home.jsx

import React, { Component } from "react";

class Home extends Component {
  state = {};

  render() {
    console.log("Render Home");
    return <h1>Home</h1>;
  }
}

export default Home;

如果我将其 Home 更改为功能组件，则它只呈现一次。但是为什么类组件会渲染两次呢？

【问题讨论】：

标签： reactjs render

【解决方案1】：

答案在于关于严格模式的React docs：

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

类组件构造函数、渲染和 shouldComponentUpdate 方法

类组件静态getDerivedStateFromProps方法

函数组件体

状态更新函数（setState 的第一个参数）

传递给 useState、useMemo 或 useReducer 的函数

幸运的是，这仅适用于开发模式，因此您不会在生产中出现这种双重渲染。

【讨论】：

好的，但即使在开发模式下，双重渲染也会使我的代码变得混乱。有没有办法避免这个麻烦？

【解决方案2】：

尝试不使用严格模式：

ReactDOM.render(
  <Home />,
  document.getElementById("root")
);

【讨论】：