热加载程序复制代码（n次）而不是热交换

Question

当我在组件中进行更改时，webpack会重新编译并对模块进行热交换。但是现在我的代码运行n次，其中n是热模块交换所花费的时间地点。例如，我进行了更改，现在函数正在运行两次。我做了另一个改变，功能正在运行三次。我可以在我的商店的dispatchToken中放置一个console.log(Date.now())，我可以看到它运行n次。

商店：http://pastebin.com/PVnyf572

webpack.config.js：http://pastebin.com/MsziqH9v

我用webpack-dev-server app/client.js --inline --hot --colors

运行webpack-dev-server

当我进行复杂的更改时，我经常会收到以下错误消息（尽管如果我更改Store的第60行以增加健康状况，则会发生这种情况，例如10，而不是6）：

  

似乎未正确配置React Hot Loader。如果您正在使用NPM，请确保您的依赖项不会将重复的React分发拖到其node_modules中，并且需要（“react”）对应于您呈现应用程序的React实例。如果您使用的是预编译版本的React，请参阅https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react了解集成说明。

Answer 1

我认为你的webpack配置不合适。使用此样板然后运行您的代码我认为您的问题将得到解决

https://github.com/tapos007/ReactJS-MobX-Webpack-Boilerplate

Answer 2

听起来你正在热重装有副作用的东西。

Webpack文档提供了a few examples来展示如何处理热重新加载。

根据你的pastebin代码，我猜这是一个副作用：

    this.dispatchToken = Dispatcher.register(this.onAction.bind(this))

我认为您需要在module.hot文件中添加PlayerStore检测代码，以便在替换模块时“取消注册”。