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

我有一个简单的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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render(
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

在App.js中：

从“React”导入React，{Component}； 导入“/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;

类应用程序扩展组件{
构造函数（）{
超级（）；
this.ms=newmessagehandler（'ws://localhost:3000/ws'）；
console.debug（'构建组件应用程序'）；
}
render（）{
返回(
)
}
}
导出默认应用程序；

现在，当我加载应用程序时，我总是在websocket服务器上收到两个连接调用，控制台也会显示两次“Component app is constructed”。 因此，出于某种原因，react似乎调用了两次

newapp（）

（或者react框架中类似的东西），我不知道要搜索什么。有什么想法吗？或者至少有什么想法如何调试它？

这是由于反应。从文档中：

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

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

只需删除索引中的

标记即可避免这种情况。希望有帮助

<>编辑：在相关的注释中，如果您在安装组件时做了一些事情，比如异步数据检索，请考虑将构造函数中的逻辑从“代码>组件”安装到生命周期函数。你可以读一下。祝你好运

这是由于反应。从文档中：

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

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

只需删除索引中的

标记即可避免这种情况。希望有帮助

---

<>编辑：在相关的注释中，如果您在安装组件时做了一些事情，比如异步数据检索，请考虑将构造函数中的逻辑从“代码>组件”安装到生命周期函数。你可以读一下。祝你好运

非常感谢，就这样。我也读过关于使用componentDidMount的文章，但我也在子组件中使用websocket，在那里注册侦听器，因此componentDidMount被调用到了很晚。非常感谢，就这样。我还阅读了有关使用componentDidMount的内容，但我也在子组件中使用websocket，在那里注册侦听器，因此出于我的目的，componentDidMount被推迟调用。