预计阅读本文只需要两分钟，一分钟看文章，一分钟跑代码 nice！
什么是React Fast Refresh？
React Fast Refresh 是 React 官方为 React Native 开发的模块热替换（HMR）方案，由于其核心实现与平台无关，所以也适用于 Web。
官方实现为 react-refresh
快速上手
不浪费时间，请跟着我在 1分钟 内构建一个支持 React Fast Refresh 的应用。
安装依赖
主要使用下面两个 npm 包（可以跳过，直接拷贝下文的 package.json）
npm install @pmmmwh/react-refresh-webpack-plugin react-refreshwebpack.config.js
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/preset-react'],
plugins: [require.resolve('react-refresh/babel')], // 为 react-refresh 添加
},
},
],
},
plugins: [
new ReactRefreshPlugin(), // 为 react-refresh 添加
new HtmlWebpackPlugin({
template: './index.html',
}),
],
};
index.js
import * as React from 'react';
import { render } from 'react-dom';
import App from './app'
render(<App />, document.getElementById('app'));
app.js
import React from "react";
function App() {
return <h1>hello world！</h1>
}
export default App;index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>package.json
{
"name": "react-refresh-app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "webpack-dev-server --hot"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"react-refresh": "^0.8.3",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}最后
安装 npm install
启动 npm run start
你肯定已经顺利跑起来了
那尝试修改 App.js 看看吧！
与 react-hot-loader 相比
使用过 HMR 的同学，想必都有接触 react-hot-loader 可能会说，我现在用的好好的，为什么要换，这不是没事找事闲扯淡嘛？
原因以下几点
1. 官方支持
官方的支持，除了光环之外，还带来性能与稳定性保障，对 hook 更完善的支持...
How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?（官方给出的简要使用教程）
2. 更低的侵入性
不必在项目代码中用 hot(App) 的形式来标记组件，或是在 webpack.entry 中注入额外代码
3. react-hot-loader 官方退役声明
引用官方声明
React-Hot-Loader is expected to be replaced by React Fast Refresh. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.
翻译：预计 React-Hot-Loader 将被 React快速刷新 取代。如果您的环境支持 Fast Refresh，那么请删除 React-Hot-Loader。
注意事项
- react-refresh 最低支持版本
react-dom@16.9+，如果添加到老项目中后，热更新没有生效，那么首先请确认版本是否满足要求。 - 入口文件不支持 HMR，如果在入口文件中直接修改组件，会降级为 LiveReload。
- webpack 的
externals配置项会导致react-refresh失效，在dev环境下可以先关闭配置。
最后
希望在两分钟内看完的同学都学会了，实践出真知嘛，最好要在项目中实际使用一番。
当然，历史遗留项目要在具体评估后，再决定是否使用，以免翻车。
如果你发现了其他关于 react-refresh 的问题或想法，可以在评论里补充，共同填坑，让其他同学也能早点下班，少修福报。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。