craco-plugin-react-hot-reload 是一个 Create React App 的插件，它可以让你快速地在 React 应用中实现热重载。在本文中，我们将详细介绍这个插件的使用方法，并提供代码示例供读者参考和学习。
准备工作
在开始使用 craco-plugin-react-hot-reload 插件之前，你需要准备好以下环境和工具：
- 最新版的
Node.js和npm。 - 一个已经创建好的
React应用，可以通过create-react-app生成。
安装 craco 和 craco-plugin-react-hot-reload
安装 craco 和 craco-plugin-react-hot-reload 的命令如下：
# 安装 craco npm install @craco/craco --save-dev # 安装 craco-plugin-react-hot-reload npm install craco-plugin-react-hot-reload --save-dev
同时，需要在项目根目录下创建一个名为 craco.config.js 的文件，该文件用于配置 craco 和 craco-plugin-react-hot-reload：
-- -------------------- ---- -------
----- ------------------------- - -----------------------------------------
-------------- - -
-------- -
-
------- --------------------------
-------- --
-
-
--这里的 options 对象可以留空，如下所示：
options: {}修改 react-scripts 程序
在项目根目录下找到 node_modules/react-scripts/config/webpackDevServer.config.js 这个文件（如果没有请全局安装 create-react-app，并在全局寻找）
找到如下代码：
-- -------------------- ---- -------
----- --------------- - -
----------------- -------
------------------- -
--------------- -----
--
--------- -----
--------------- -------
------------ ----------------
----------------- -----
---- -----
----------- ----
------ -----
------------- -
-------- ---------------------------
--
------ -------- --- --------
----- -----
-------- ------
------- ------------
------
--添加一行代码：
devServerConfig.hotOnly = true;
最终效果如下：
-- -------------------- ---- -------
----- --------------- - -
----------------- -------
------------------- -
--------------- -----
--
--------- -----
--------------- -------
------------ ----------------
----------------- -----
---- -----
-------- -----
----------- ----
------ -----
------------- -
-------- ---------------------------
--
------ -------- --- --------
----- -----
-------- ------
------- ------------
------
--这样修改使得 hot 模式只进行热更新而不进行刷新。
修改 index.js
打开 src/index.js 文件，在文件头部添加以下代码：
if (module.hot) {
module.hot.accept();
}启动应用
在命令行输入以下命令：
yarn start
这时应该启动了开发服务器，并在浏览器中自动打开 React 应用。在修改代码后，应用应该会自动重新加载而不用手动刷新浏览器。
总结
通过使用 craco-plugin-react-hot-reload，我们可以很方便地实现 React 应用的热更新。在修改代码后，应用会自动重新加载，省去了手动刷新浏览器的烦恼。值得注意的是，我们需要修改 React 应用的配置文件、程序文件和 webpack 配置文件，才能使 craco-plugin-react-hot-reload 正常工作。
示例代码：
-- -------------------- ---- -------
-- ---------------
----- ------------------------- - -----------------------------------------
-------------- - -
-------- -
-
------- --------------------------
-------- --
-
-
--
-- --------------------------
----- --------------- - -
----------------- -------
------------------- -
--------------- -----
--
--------- -----
--------------- -------
------------ ----------------
----------------- -----
---- -----
-------- -----
----------- ----
------ -----
------------- -
-------- ---------------------------
--
------ -------- --- --------
----- -----
-------- ------
------- ------------
------
--
-- ------------
-- ------------ -
--------------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067370890c4f72775840a5