时间戳

首页 > 解决方案 > 为什么这个 React App 初始化两次？

reactjs - 为什么这个 React App 初始化两次？

问题描述

我已经使用webpack、react-router、redux和构建了一个反应应用程序redux-saga。

当我刷新应用程序初始化两次。

我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')
);

如何防止此反应应用程序在加载时初始化两次？

标签： reactjswebpackreduxreact-routerredux-saga

解决方案

我懂了！

如果您使用html-webpack-plugin, 和webpack，请确保您设置了 inject: false:

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

我有一个plugins部分webpack.config.dev：

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

拥有这套的唯一奇怪的效果是一些风格已经改变。想知道这是为什么...

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

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

推荐阅读