预计浏览本文只须要两分钟，一分钟看文章，一分钟跑代码 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-refresh

webpack.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 的问题或想法，能够在评论里补充，独特填坑，让其他同学也能早点上班，少修福报。

参考资料

  • How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?（官网给出的简要应用教程）
  • react-refresh-webpack-plugin
  • react-hot-loader