Question

因此，使用webpack，只有在模块中或模块的父代中有此代码时，HMR才会起作用：

if (module.hot) {
  module.hot.accept()
}

这让我想知道为什么你会首先拒绝HMR。使用它会产生性能成本或其他负面影响吗？

docs在这个问题上不是很明确。

Answer 1

如果你的代码

，你只能使用HMR

由于大多数代码都不是无状态的，因此需要做一些额外的工作。实现此目的的常用方法是使用代理替换导出的函数（react-hot-loader以类似的方式工作）。因此，可以替换代理背后的实际实现而无需更新其他依赖项。

例如，想象一下这个（错误的）模块：

function add(a, b) {
    return a - b;
}

export add;

在注意到该错误之后，您不能随时更换add函数，因为其他模块会保留对它的引用。这就是为什么你需要一个包装导出函数的代理：

function _add(a, b) {
    return a - b;
}

export function add(a, b) {
    return _add(a, b);
};

现在您可以轻松换出_add而无需更新其他模块。这适用于函数，但与导出的对象，数字，字符串等其他类型失败。但是，使用ES2015 proxies，可以在所有类型上导出像代理一样工作的占位符。

因此，HMR面临的挑战是您需要使用新代码替换旧代码，而不会留下任何奇怪的状态。而这仍然很难以通用的方式进行。