likes
comments
collection
share

一分钟用上热更新 React Fast Refresh(react-refresh)

作者站长头像
站长
· 阅读数 95
预计阅读本文只需要两分钟,一分钟看文章,一分钟跑代码 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
评论
请登录