Question

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

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更改为功能组件，则仅渲染一次。但是为什么类组件要渲染两次？

Answer 1

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

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

类组件的构造函数，呈现器和shouldComponentUpdate方法

类组件的静态getDerivedStateFromProps方法

功能组件主体

状态更新程序功能（setState的第一个参数）

传递给useState，useMemo或useReducer的函数

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

Answer 2

尝试不使用严格模式：

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

React类组件渲染两次

2 个答案: