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

Posted 2023-02-21

【中文标题】热加载程序复制代码（n 次）而不是热交换

【英文标题】：hot loader duplicating code (n times) instead of hot swapping

【发布时间】：2016-11-11 20:57:04

【问题描述】：

当我对组件进行更改时，webpack 会重新编译并对模块进行热交换。但是现在我的代码运行 n 次，其中 n 是发生热模块交换的次数。例如，我进行了更改，现在函数运行了两次。我又做了一个更改，函数运行了 3 次。我可以在我商店的 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 中，并且 require("react") 对应于您渲染应用程序的 React 实例。如果您使用的是 React 的预编译版本，请参阅 https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react 了解集成说明。

【问题讨论】：

你确定你没有在页面上加载两个单独的 React 副本给你错误消息吗？例如，在 Developer Tools / Sources 中，如果您 Ctrl+O 或 Cmd+O，然后键入 React，您是否只有一个 React.js ？ Example

【参考方案1】：

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

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

【参考方案2】：

听起来您正在热重新加载具有副作用的东西。

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

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

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

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