乐趣区

关于前端:一分钟用上热更新-React-Fast-Refreshreactrefresh

jiezi

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