Reactjs 为什么此应用程序会初始化两次？

我已经使用

webpack

、

react router

、

redux

和

redux saga

构建了一个react应用程序

当我刷新时，应用程序会初始化两次

我正在使用

websockets

与

go

服务器通信，并在应用程序初始化时初始化一个

saga

。 因为它会加载两次-一个只会触发一次的事件，会触发两次

这是我的

index.js

：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from "react-router-dom";
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import thunk from 'redux-thunk';

import Root from './components/Root';
import reducers from './reducers';
import setupSocket from './actionCreators/websocketActions';

import handleNewMessage from './sagas';
import "./styles/main.scss";

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  reducers,
  applyMiddleware(sagaMiddleware, thunk)
);

const { dispatch } = store

const socket = setupSocket(dispatch)

sagaMiddleware.run(handleNewMessage, { socket, user })

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Root />
    </Router>
  </Provider>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“react Router dom”导入{BrowserRouter as Router}；
从“redux”导入{createStore，applyMiddleware}；
从“redux saga”导入createSagaMiddleware
从“redux thunk”导入thunk；
从“./components/Root”导入根目录；
从“./reducers”导入减速机；
从“/actionCreators/websocketActions”导入setupSocket；
从“/sagas”导入handleNewMessage；
导入“/styles/main.scss”；
const sagaMiddleware=createSagaMiddleware（）
const store=createStore(
减速器，
applyMiddleware（sagaMiddleware，thunk）
);
const{dispatch}=store
常量套接字=设置套接字（调度）
运行（handleNewMessage，{socket，user}）
ReactDOM.render(
,
document.getElementById（'root'））
);

---

如何防止此react应用程序在加载时两次初始化？我知道了

如果您使用的是

html网页包插件

，以及

webpack

，请确保设置了

inject:false

：

const htmlWebPackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inject: false,
})

我的

webpack.config.dev

有一个

plugins

部分：

module.exports = {
  plugins: [
    htmlWebPackPlugin,
    extractSCSS
  ],
};

拥有这一套的唯一奇怪的效果是一些风格发生了变化。 想知道为什么

样式由webpack.config中的以下内容解析：

 {
    test: /(\.css|\.scss)$/,
    use:['style-loader','css-loader', 'sass-loader']
 }

---

这里的

user

是什么？它是一个生成随机名称的util文件-实际上为了简单起见，它不应该在这里。所以，我算出了双重负荷。如果您使用的是“html网页包插件”，可以通过在网页包中添加“inject:false”来防止这种情况。唯一的问题是，由于某种原因，它会稍微改变样式。“初始化”是什么意思？如果你刷新页面，应用程序就会初始化。我在index.js中有一个console.log，它运行了两次。我可能会删除这个问题，因为答案与发布的代码无关。你认为这会影响样式吗？因此，设置inject:false后，样式似乎不再加载。必须有一种方法可以将webpack的inject设置为false来设置SCS。