时间戳

首页 > 解决方案 > React Component 和 render 方法被调用了两次

javascript - React Component 和 render 方法被调用了两次

问题描述

在我的组件中，构造函数和渲染方法被调用了两次。我从 create-react-app 创建了一个全新的项目，它只有一个组件，而不是 App 组件，所以它不是那么复杂和复杂，但问题仍然存在。

  import React from "react";
import logo from "./logo.svg";
import "./App.css";
import First from "./First";

function App() {
  return (
    <div className="App">
      <First />
    </div>
  );
}

export default App;


import React, { Component } from "react";

class First extends Component {
  static count = 0;
  constructor(props) {
    super(props);
    this.state = {};
    console.log("ctor");
    alert("ctor");
  }
  render() {
    First.count++;
    console.log("Render method", First.count);

    return <div>Hello World</div>;
  }
}

export default First;

所有其他生命周期钩子都被渲染一次，它们没有问题。

标签： javascriptreactjsconstructorrendering

解决方案

这可能是因为您的index.js文件中的 React StrictMode。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

严格模式检查潜在问题并导致运行一些生命周期方法（如构造函数、渲染、componentShouldUpdate 等）两次。如果它困扰你，你可以简单地删除它，但最好不要。

严格模式检查仅在开发模式下运行；它们不会影响生产构建。

你可以在严格模式上阅读更多关于它的信息

推荐阅读