脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react自行配置热更新

react项目自行配置热更新的实现

 更新时间：2023年11月27日 09:54:13   作者：程序员超超  
本文主要介绍了react项目自行配置热更新的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

react项目自己配置热更新的话需要安装两个包@pmmmwh/react-refresh-webpack-plugin和react-refresh，这个是官方推荐的做法。下面给出一个完整demo

App.js

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1 onClick={() => setCount(count + 1)}>{count}</h1>
      <div>1</div>
    </div>
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="zn">
  <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>

index.js

import React from "react";
import App from "./App";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("app"));

root.render(<App></App>);

webpack.config.js

const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  mode: "development",
  devServer: {
    static: "./dist",
    hot: true,
  },
  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(),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

package.json

{
  "name": "react-hmr",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.5.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.14.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

之后执行npm start，大家自行测试

这里说一下注意点，每个组件只能使用一个export，如果有多个，热更新会失效，这点很重要。例如我们修改App.js

App.js

import React, { useState } from "react";

export const delay = () => {}

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1 onClick={() => setCount(count + 1)}>{count}</h1>
      <div>1</div>
    </div>
  );
}

export default App;

这里多加了一个export const delay，大家可以试一下。这个时候热更新就不起作用了。

这里还解释一下为什么不用webpack的hmr，webpack不是自带hmr么，为什么还安装其他的包呢？这个问题大家可以看一下我这篇文章

还有一种方式是使用react-hot-loader，不过react-hot-loader已经不推荐使用了。

我们这里基于上面的代码进行改编，这里react和react-dom需要降级，把18版本降级成17版本。不然无法使用。先执行

npm i react@17.0.0 react-dom@17.0.0
npm i react-hot-loader

修改webpack.config.js配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  mode: "development",
  devServer: {
    static: "./dist",
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env", "@babel/preset-react"],
          plugins: ["react-hot-loader/babel"],
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

修改index.js

import { hot } from "react-hot-loader/root";
import React from "react";
import App from "./App";
import { render } from "react-dom";

const HotComponent = hot(App);

render(<HotComponent />, document.getElementById("app"));

if (module.hot) {
  module.hot.accept("./App", () => {
    render(<HotComponent />, document.getElementById("app"));
  });
}

到此这篇关于react项目自行配置热更新的实现的文章就介绍到这了,更多相关react自行配置热更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • React之防止按钮多次点击事件 重复提交

    React之防止按钮多次点击事件 重复提交

    这篇文章主要介绍了React之防止按钮多次点击事件 重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用React Hooks模拟生命周期的实现方法

    使用React Hooks模拟生命周期的实现方法

    这篇文章主要介绍了使用React Hooks模拟生命周期,本文举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期，需要的朋友可以参考下
    2023-02-02
  • 解析React ref 命令代替父子组件的数据传递问题

    解析React ref 命令代替父子组件的数据传递问题

    这篇文章主要介绍了React - ref 命令为什么代替父子组件的数据传递,使用 ref 之后，我们不需要再进行频繁的父子传递了，子组件也可以有自己的私有状态并且不会影响信息的正常需求，这是为什么呢？因为我们使用了 ref 命令的话，ref是可以进行状态的传输
    2022-08-08
  • React Hooks使用常见的坑

    React Hooks使用常见的坑

    React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。接下来通过本文给大家分享React Hooks使用避坑指南，一起学习下吧
    2021-06-06
  • React路由监听/跳转/守卫的完整指南

    React路由监听/跳转/守卫的完整指南

    React Router 是 React 单页应用的核心路由库,除了基础的路由配置,日常开发中还会高频用到路由监听、编程式跳转、路由守卫等进阶功能,本文从实战角度拆解这三大核心能力,需要的朋友可以参考下
    2026-03-03
  • React简单介绍

    React简单介绍

    React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
    2017-05-05
  • 浅谈React组件之性能优化

    浅谈React组件之性能优化

    这篇文章主要介绍了浅谈React组件之性能优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • react性能优化useMemo与useCallback使用对比详解

    react性能优化useMemo与useCallback使用对比详解

    这篇文章主要为大家介绍了react性能优化useMemo与useCallback使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 深入理解React与闭包的关系

    深入理解React与闭包的关系

    本文将深入探讨React与闭包之间的关系，我们将首先介绍React和闭包的基本概念，然后详细解释React组件中如何使用闭包来处理状态和作用域的问题，希望通过本文的阅读，你将对React中闭包的概念有更深入的理解，并能够在开发React应用时更好地应用闭包
    2023-07-07
  • react hooks入门详细教程

    react hooks入门详细教程

    这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04

最新评论