组件热更新：开发效率的秘密武器

写代码最怕什么？改一行样式，整个页面刷新，状态全丢，还得重新点开那个测试用例。尤其在调试复杂交互时，这种打断感让人抓狂。这时候，组件热更新就像个默默工作的助手，帮你保留当前状态，只更新修改的部分。

什么是组件热更新

组件热更新（Hot Module Replacement，简称 HMR）是现代前端构建工具提供的一项功能。它允许你在不刷新整个页面的情况下，替换、添加或删除正在运行的模块。最常见的场景就是 React 或 Vue 开发中，修改一个按钮组件的样式或逻辑，浏览器只更新这个按钮，而不是整个页面重载。

想象一下你在调试购物车逻辑，刚把商品加到第三步，发现按钮颜色不对。传统方式是你改完代码，页面刷新，购物车清空，一切从头来过。而开启热更新后，你保存代码，按钮颜色立刻变掉，购物车里的东西还在，流程不用重走。

怎么启用它

大多数现代脚手架已经内置了 HMR。比如用 Vite 创建的项目，开发服务器启动时自动开启：

npx vite

你不需要额外配置，保存文件就能看到变化。如果是 Webpack 项目，通常在开发模式下通过 webpack-dev-server 启动，也会默认支持：

webpack serve --mode development

关键在于确保入口文件里有 HMR 监听逻辑。比如 Webpack 中可以这样写：

if (module.hot) {
  module.hot.accept('./Button', () => {
    console.log('Button 模块已更新');
  });
}

Vue 和 React 中的实际表现

在 Vue 单文件组件中，Vite 或 Vue CLI 会自动处理 .vue 文件的热更新。你改了 <template> 或 <script>，组件直接替换，数据状态保留在内存中。

React 项目配合 React Fast Refresh（如 Create React App 内置），函数式组件也能做到局部刷新。哪怕你用了 hooks，修改 useState 的初始值也不会重置当前状态。

不是所有情况都能热更新

如果改动涉及模块依赖结构，比如新增一个 import，或者修改了高阶组件的封装逻辑，HMR 可能会失败，退回到整页刷新。另外，某些副作用操作，像未清理的定时器或事件监听，可能在热替换后残留，造成内存泄漏。

遇到这种情况，可以手动在模块卸载前清理：

useEffect(() => {
  const timer = setInterval(() => { /* ... */ }, 1000);

  return () => clearInterval(timer); // 热更新时也会执行
});

热更新不是魔法，它依赖模块系统的动态加载能力。只要代码组织合理，大部分日常开发都能享受“改完即现”的流畅体验。