react项目自行配置热更新

react项目自己配置热更新的话需要安装两个包@pmmmwh/react-refresh-webpack-pluginreact-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"));});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172976.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【推荐系统】MMOE笔记 20231126

paper阅读 任务差异带来的固有冲突实际上会损害至少某些任务的预测&#xff0c;特别是当模型参数在所有任务之间广泛共享时。&#xff08;在说ESMM&#xff09; 共享底层参数可以减少过拟合风险&#xff0c;但是会遇到任务差异引起的优化冲突&#xff0c;因为所有任务都需要在…

MySQL的undo log 与MVCC

文章目录 概要一、undo日志1.undo日志的作用2.undo日志的格式3. 事务id&#xff08;trx_id&#xff09; 二、MVCC1.版本链2.ReadView3.REPEATABLE READ —— 在第一次读取数据时生成一个ReadView4.快照读与当前读 小结 概要 Undo Log&#xff1a;数据库事务开始之前&#xff0…

【nowcoder】BM4 合并两个排序的链表

题目&#xff1a; 题目分析&#xff1a; 题目分析转载 代码实现&#xff1a; package BMP4;import java.util.List;class ListNode {int val;ListNode next null;public ListNode(int val) {this.val val;} } public class BM4 {/*** 代码中的类名、方法名、参数名已经指定…

C语言中文网 - Shell脚本 - 10 - 第一个Shell脚本

第1章 Shell基础&#xff08;开胃菜&#xff09; 10. 第一个Shell脚本 几乎所有编程语言的教程都是从使用著名的“Hello World”开始的&#xff0c;出于对这种传统的尊重&#xff08;或者说落入俗套&#xff09;&#xff0c;我们的第一个 Shell 脚本也输出“Hello World”。 打…

记一次Kotlin Visibility Modifiers引发的问题

概述 测试环境爆出ERROR告警日志java.lang.IllegalStateException: Didnt find report for specified language&#xff0c;登录测试环境ELK查到如下具体的报错堆栈日志&#xff1a; java.lang.IllegalStateException: Didnt find report for specified language at com.aba.…

数组栈的实现

1.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作 进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底 栈中的数据元素遵守后进先出LIFO,&#xff08;Last In First Out&#xff09;的原则 压栈&…

如何将 Python 运用到实际的测试工作中

1、自动化测试脚本编写&#xff1a; Python广泛用于编写自动化测试脚本&#xff0c;以执行各种测试任务。可以使用Selenium、Appium或PyTest等库来辅助测试脚本的编写。 下面是一个示例&#xff1a; from selenium import webdriver import unittestclass LoginTest(unittes…

[网络] 字节一面~ 2. HTTP 2 与 HTTP 1.x 有什么区别

头部压缩 在 HTTP2 当中&#xff0c;如果你发出了多个请求&#xff0c;并且它们的头部(header)是相同的&#xff0c;那么 HTTP2 协议会帮你消除同样的部分。(其实就是在客户端和服务端维护一张索引表来实现)二进制格式 HTTP1.1 采用明文的形式 HTTP/2 全⾯采⽤了⼆进制格式&…

简析range和xrange的区别

在 Python 2 中&#xff0c;存在 range() 和 xrange() 两个函数&#xff0c;但在 Python 3 中&#xff0c;xrange() 已经被移除&#xff0c;只剩下了 range() 函数。 主要区别在于它们返回的对象类型不同&#xff1a; range() 返回的是一个列表对象&#xff0c;它直接生成一个…

【科技素养】蓝桥杯STEMA 科技素养组模拟练习试卷8

1、一家餐馆同时有四个顾客点单&#xff0c;他们点的菜分别需要 12&#xff0c;15&#xff0c;20 和 30分钟的准备时间。在一次只能准备一份菜的情况下&#xff0c;四个顾客的等待时间之和最小是&#xff08;&#xff09;分钟 A、128 B、192 C、282 D、163 答案&#xff1…

[JVM] 美团二面,说一下JVM数据区域

Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域。这些区域有不同的用途。 文章目录 线程私有的数据区域1. 程序计数器2. Java 虚拟机栈3. 本地方法栈 线程共享的数据区域1. Java 堆2. 方法区3. 运行时常量池4. 直接内存 线程私有的数据区域 …

MIT 6.824 -- MapReduce Lab

MIT 6.824 -- MapReduce Lab 环境准备实验背景实验要求测试说明流程说明 实验实现GoLand 配置代码实现对象介绍协调器启动工作线程启动Map阶段分配任务执行任务 Reduce 阶段分配任务执行任务 终止阶段 崩溃恢复 注意事项并发安全文件转换golang 知识点 测试 环境准备 从官方gi…

鸿蒙开发-ArkTS 语言-状态管理

鸿蒙开发-ArkTS 语言-基础语法 3. 状态管理 变量必须被装饰器装饰才能成为状态变量&#xff0c;状态变量的改变才能导致 UI 界面重新渲染 概念描述状态变量被状态装饰器装饰的变量&#xff0c;改变会引起UI的渲染更新。常规变量没有状态的变量&#xff0c;通常应用于辅助计算…

C 文件 fprintf()和 fscanf()

C 文件 fprintf()和 fscanf() 写入文件&#xff1a;fprintf()函数 fprintf()函数用于将字符集写入文件。它将格式化的输出发送到流。 语法&#xff1a; int fprintf(FILE *stream, const char *format [, argument, ...])示例 #include <stdio.h> void main(){FILE…

案例026:基于微信的原创音乐小程序的设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

关于C语言控制浮点数输出精度问题

众所周知 C语言在控制一个浮点数输出精度的时候是在%和f之间加上一个.(想要控制的精度) 如&#xff1a;printf("%.2f", num); 问&#xff0c;试问&#xff1a;&#xff08;你就是我的御主吗&#xff1f;&#xff09;如果输出的精度是根据输入的数字变化的怎么办&am…

单片机学习7——定时器/计数器编程

#include<reg52.h>unsigned char a, num; sbit LED1 P1^0;void main() {num0;EA1;ET01;//IT00;//设置TMOD的工作模式TMOD0x01;//给定时器装初值&#xff0c;50000,50ms中断20次&#xff0c;就得到1sTH0(65536-50000)/256;TL0(65536-50000)%256;TR01; // 定时器/计数器启…

从0开始学习JavaScript--JavaScript中的对象原型

JavaScript中的对象原型是理解该语言核心概念的关键之一。本文将深入探讨JavaScript对象原型的作用、使用方法以及与继承相关的重要概念。通过详细的示例代码和全面的讲解&#xff0c;将能够更好地理解和运用JavaScript对象原型&#xff0c;提高代码的可维护性和扩展性。 Java…

Linux命令(134)之install

linux命令之install 1.install介绍 linux命令install是用来复制文件并设置其属性 2.install用法 install [参数] source destination install参数 参数说明-m设定目标文件权限&#xff0c;默认为755-o设定目标文件属主-g设定目标文件属组-d创建目录 3.实例 3.1.复制/etc/…

C语言题目强化-DAY14

题型指引 一、选择题二、编程题 ★★写在前面★★ 本题库源自互联网&#xff0c;仅作为个人学习使用&#xff0c;记录C语言题目练习的过程&#xff0c;如果对你也有帮助&#xff0c;那就点个赞吧。 一、选择题 1、有以下函数&#xff0c;该函数的功能是&#xff08; &#xff…