在 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（如果你还没有安装的话）：
npm install webpack webpack-cli webpack-dev-server --save-dev
然后安装 @pmmmwh/react-refresh-webpack-plugin:
npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev
配置
在 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() 这个插件，那么这些代码就不是必须的了）。最重要的部分是：
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default;
ReactDOM.render(<NextApp />, document.getElementById('root'));
});
}它监听了 App.js 文件的变化，并在变化时重新渲染 App 组件。
总结
React Fast Refresh 是一个非常有用的特性，可以让你在开发过程中更快地更新组件代码，并且不会丢失表单数据。使用 @pmmmwh/react-refresh-webpack-plugin 可以帮助你快速实现这个特性。希望这个文章能够帮助你更好地理解如何使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196482