一分钟用上热更新 React Fast Refresh（react-refresh）

站长

2022年09月17日 21:19 · 阅读数 98

预计阅读本文只需要两分钟，一分钟看文章，一分钟跑代码 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 的问题或想法，可以在评论里补充，共同填坑，让其他同学也能早点下班，少修福报。

参考资料

转载自:https://segmentfault.com/a/1190000023534941