html - 使用 HMR 开发时如何避免重复的事件监听器？

Question

如果我在使用 HMR 的开发环境中——例如，codesandbox——如何避免创建额外的 DOM 事件监听器？

例如，这是一个简单的沙箱：

document.body.addEventListener("click", () => {
  console.log("Hi!");
});

document.body.style.backgroundColor = "green";

任何更新都会backgroundColor导致额外的注册事件侦听器（除非我完全刷新页面）。

我知道codeandbox 有一个Hard Reload on Change选项。但是这里有没有其他约定/策略可以让我保留 HMR，但避免重复事件？

标签： htmldomeventscodesandboxhot-module-replacement