23、React开发中的热模块替换与路由实现

React开发中的热模块替换与路由实现

1. 热模块替换（Hot Module Replacement，HMR）

热模块替换是一种在开发过程中非常实用的技术，它可以在不刷新整个页面的情况下更新模块，从而提高开发效率。

1.1 启动WDS并观察HMR信息

首先，我们可以使用以下命令启动Webpack开发服务器（WDS）：

npm run wds 或者 npm run wds-cli

启动后，访问 http://localhost:8080 并打开开发者工具控制台，你会看到如下信息：

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

在邮箱或评论字段中输入一些文本，然后修改 content.jsx 文件，比如将表单文本从 Email 改为 Your Email: ：

Your Email: <input ref="emailAddress" className="form-control" type="text"
➥ placeholder="hi@azat.co"/>

此时，你会看到一些