Question

我有一个简单的react应用，其中包括一个websocket。现在我想知道为什么一次打开react应用程序时websocket连接总是打开两次。

经过一番调查，我发现它实际上是我的根组件“ App”，它以某种方式构造了两次。我在index.js中：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

在App.js中：

从'react'导入React，{组件}; 导入'./App.css';

class App extends Component {
  constructor(){
    super();
    this.ms = new MessageHandler('ws://localhost:3000/ws');
    console.debug('Component App is constructed');
  }

    render() {
      return (
        <div className="App">
          <!-- Boring content -->
        </div>
            )
    }
}

export default App;

现在，当我加载应用程序时，我总是在websocket服务器上收到两次连接调用，并且控制台也两次显示“组件应用程序已构建”。因此，由于某种原因，react似乎两次调用new App()（或类似的react框架），我也不知道要搜索什么。有任何想法吗？或至少有任何想法如何进行调试？

Answer 1

这是由于React strict mode。从文档中：

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

类组件的构造函数，呈现器和shouldComponentUpdate方法类组件的静态getDerivedStateFromProps方法功能组件主体状态更新器功能（setState的第一个参数）传递给useState，useMemo或useReducer的函数

只需删除索引中的<React.StrictMode>标签即可避免这种情况。希望有帮助！

编辑：在相关说明中，如果在安装组件时正在执行某些操作（例如异步数据检索），请考虑将该逻辑从构造函数中移出到componentDidMount生命周期函数中。您可以阅读有关here的信息。祝你好运！

react组件的构造函数被两次调用

1 个答案: