在 React 16.13 之前，修改组件代码后需要刷新整个页面才能看到效果。但是 React 16.13 引入了一个新的特性，叫做 React Fast Refresh（即 React Refresh）。它可以让你在不刷新页面的情况下更新组件代码，并且还能保留你已经填好的表单数据。为了使用这个特性，你需要安装一个叫做 @pmmmwh/react-refresh-webpack-plugin 的 npm 包。
安装
要使用 @pmmmwh/react-refresh-webpack-plugin，你需要首先安装 webpack 和 webpack-dev-server（如果你还没有安装的话）：
--- ------- ------- ----------- ------------------ ----------
然后安装 @pmmmwh/react-refresh-webpack-plugin:
--- ------- ------------------------------------ ------------- ----------
配置
在 webpack.config.js 中添加以下代码：
----- ------------------------- - ------------------------------------------------
-------------- - -
---
---------- -
---
---- -----
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -----------------------------------------
--
--
--
--
--
-------- ---- -----------------------------
--这里做了三件事：
- 添加了一个 devServer 属性，开启了热更新（Hot Module Replacement）。
- 使用 babel-loader 来编译 JavaScript 文件，并使用 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh/babel 插件来启用 React Fast Refresh 特性。
- 添加了一个新的 webpack 插件：@pmmmwh/react-refresh-webpack-plugin。
使用
现在你可以在 React 项目中尝试修改组件代码，保存文件后，webpack-dev-server 会自动编译并更新浏览器中的组件。
示例代码
这里提供一个示例代码，让你更好地理解如何使用 @pmmmwh/react-refresh-webpack-plugin。
index.js：
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
-------------------- --- ---------------------------------
-- ------------ -
-------------------------- -- -- -
----- ------- - -------------------------
------------------------ --- ---------------------------------
---
-App.js：
------ ------ - -------- - ---- --------
------ ------- -------- ----- -
----- ------- --------- - ------------
------ -
-----
----------------
------- ----------- -- -------------- - ---------------
------
--
-这里添加了一些热更新的代码（如果你使用了 new ReactRefreshWebpackPlugin() 这个插件，那么这些代码就不是必须的了）。最重要的部分是：
-- ------------ -
-------------------------- -- -- -
----- ------- - -------------------------
------------------------ --- ---------------------------------
---
-它监听了 App.js 文件的变化，并在变化时重新渲染 App 组件。
总结
React Fast Refresh 是一个非常有用的特性，可以让你在开发过程中更快地更新组件代码，并且不会丢失表单数据。使用 @pmmmwh/react-refresh-webpack-plugin 可以帮助你快速实现这个特性。希望这个文章能够帮助你更好地理解如何使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/196482