关于hotReplacement不起作用的bug（配置过react-hot-loader后浏览器仍然刷新的坑）

最新推荐文章于 2021-03-31 15:11:57 发布
最新推荐文章于 2021-03-31 15:11:57 发布
阅读量789 收藏 1
点赞数
分类专栏： react webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdmoment/article/details/86622815
版权

近几天搭建无刷新开发前端框架，在配置过react-hot-loader后，发现代码更新后，浏览器仍然会刷新，找了很久，发现配置都是正确的。这对于一个架构师来说是不可以容忍的，花了一天找到并解决了这个问题，react-hot-loader中隐藏着一个大坑，希望大家可以避免。

用一句话总结这个bug：当你的入口组件通过解构方式引入时，即使配置了react-hot-loader后，浏览器仍会刷新更新

具体看代码：

只在render组件里不能使用解构，其他的都可以使用，没影响

qdmoment
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-hot-export-loader:一个Webpack加载器，自动插入react-hot-loader代码，灵感来自react-hot-loader-loader
05-15
一个Webpack加载器，自动插入react-hot-loader代码，灵感来自 跳过未导出到React组件的资源，在process.env.NODE_ENV时不执行任何操作 安装 npm install react-hot-loader --save-dev npm install react-hot-...
react-hot-loader热加载局部更新
JJWanna的博客
07-02 290
webpack-dev-server 热加载 与 react-hot-loader 两者的区别？ webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。 react-hot-loader不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件。 如何配置 react-hot-loader ： 步骤1： 安装 react-hot-loader npm install
react-hot-loader 失效问题解决思路
weixin_42192113的博客
03-31 793
问题1：react-hot-loader 失效问题1 问题描述：使用webpack5后热更新不起作用，保存后代码会编译但是浏览器不刷新，分析发现本地服务和 浏览器之间竟然没有建立webscoket双向通信，什么鬼！！！ 以下是webpack及相关npm包版本 解决思路：按照以往的经验判断，应该是 webpack等包有问题，最后将webpack5改为webpack4，发现终于建立起websocket通信，如下是变更之后的版本 问题2： react-hot-loader 失效问题2 问题描述：虽然将 we
webpack配置react-hot-loader热加载局部更新
热门推荐
huangpb的博客
11-16 1万+
有人会问 webpack-dev-server 已经是热加载了，能做到只要代码修改了页面也自动更新了，为什么在 react 项目还要安装 react-hot-loader 呢？其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了...
react 模块热更新（Hot Module Replacement）
wangyoucaoxiaoxiao的专栏
12-06 2324
1  修改package.json中的设置 2   修改index.js  当模块更新的时候， 通知index.js 3  使用npm start  修改页面的内容发现不会再刷新页面，只是替换了修改的部分 tip :  修改代码内容，发现页面上的内容并没有发生变化， 后面找到问题答案是因为  webpack-dev-server版本问题 更新版本， 显示正常   使用2.5.0版本...
Hot-Module-Replacement详细配置说明
chiuwingyan的博客
06-30 6418
前言在react工程中要实现热加载，就是只更新局部的修改，我们可以使用react-hot-loader。安装依赖npm install --save-dev react-hot-loader修改.babelrc配置文件 { plugins: ["react-hot-loader/babel"] }开启webpack-dev-server的HMR因为react-hot-loa...
react-app-rewire-babel-loader：使用react-app-rewired在您的create-react-app项目中重新连接babel-loader加载器
01-31
相反，请考虑使用： : 以下内容实质上是模拟react-app-rewire-babel-loader ，您可以将其复制并粘贴到覆盖配置文件中： // NOTE as of customize-cra v0.2.11const { babelInclude , getBabelLoader } = require ( ...
react-hot-loader-loader：一种Webpack加载程序，可自动将react-hot-loader插入您的App中
02-06
React热加载器一个Webpack加载程序... 例： 用法安装npm i react-hot-loader-loader在您的Webpack配置中，添加以下加载器： { test : / \/ App \. js $ / , // regex to match files to receive react-hot-loader funct
react-markdown-doc-loader:Markdown-doc-loader的React后端
05-07
react-markdown-doc-loader 一个webpack加载器，用于将markdown-doc-loader的输出转换为React组件。 markdown-doc-loader将markdown文件转换为节列表。 共有三种类型的部分：减价，样式和演示。 用法 用作webpack...
react-resize-detector:跨浏览器，基于事件的React元素大小调整检测
05-12
喜欢TypeScript的人注意：从v6.0.0开始，您可以安全地从deps列表中删除@types/react-resize-detector 。 安装 npm i react-resize-detector // OR yarn add react-resize-detector 和 import ResizeObserver from ...
react项目配置react-hot-loader实现模块热更新
追风Programer的博客
03-26 8279
今天我们来聊一聊react的模块热更新，熟悉react的同学都知道，使用官方的脚手架，当我们改动页面时，整个页面会被刷新，那我们当然希望页面只刷新我们改动的部分而不是刷新整个页面，那么怎么做到如此呢？千呼万唤始出来，react-hot-loader就是来完成这个伟大的使命的。 1. 安装react-hot-loader npm i react-hot-loader --save 2. 在开...
react-hot-loader 热加载不生效的可能问题
weixin_37619109的博客
04-14 2141
react-hot-loader 热加载不生效的可能问题 如果是配置等问题请看这篇: webpack配置react-hot-loader热加载局部更新.
react-hot-loader不能正常运行
rljzp123的博客
03-25 1741
最近使用react-hot-loader的时候，按照网上的教程配置了，但是总是达不到预期效果，页面还是刷新了，后来发现是webpack的版本问题，在网上找到的资料里webpack的版本是4.x之前的，现在的webpack版本是4.2.0，所以package.json里应该改成：另外，教程里的webpack.config.js的 entry 里加上 "react-hot-loader/patch"也...
react使用react-hot-loader实现局部热更新
przlovecsdn的博客
08-16 9852
Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？ A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack ...
react-hot-loader的使用方式
AboyL的博客
04-01 7756
webpack中提供了热模块更新的功能，在不刷新整个页面的情况下来替换某些更变的组件，而这样做的最大的好处就在于状态的保存。比如我们前面在输入框中输入的内容，就不会在我们热模块替换以后被刷新掉，让我们要重新再输入一次了。而react的构建现在一般还是基于webpack的，webpack也提供了对应的插件。react-hot-loaderhttps://github.com/gaearon/reac...
react-native-router-flux Actions 跳转后可以清除传参不刷新页面吗
最新发布
06-08
可以通过使用 `reset` 方法来清除传参并不刷新页面。具体实现如下： ```javascript import { Actions } from 'react-native-router-flux'; Actions.reset('targetScene', { type: 'replace' }); ``` 其中，`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值