HMR全称是Hot Module Replacement，热模块替换。它的核心思想是在不刷新整个页面的情况下，替换、添加或删除模块。
实现原理主要分为几个步骤：
首先，Webpack在开发模式下会启动一个WebSocket服务器，与浏览器建立长连接。
当代码发生变化时，Webpack会重新编译模块，并通过WebSocket向浏览器发送更新消息。
浏览器接收到更新消息后，会请求新的模块代码。
React的HMR需要配合React Hot Loader或Fast Refresh来实现。它会保持组件的状态，只更新发生变化的组件，而不是重新挂载整个组件树。
对于函数组件，Fast Refresh会保持组件状态和副作用。对于类组件，会重新挂载组件但保持父组件的状态。
HMR的优势是开发体验更好，保存代码后立即看到效果，不需要手动刷新页面，状态也不会丢失。
在实际开发中，我们通常使用Create React App或Next.js等框架，它们已经内置了HMR功能，开箱即用，大大提升了开发效率。