在构建react项目时,默认使用的webpack-dev-serve有热刷新功能,但是局限是修改一处会使整个页面刷新

当引入了react-hot-loader时,可以实现局部刷新,即同个页面上,某一处的数据修改不会让整个页面一起刷新

 import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App'; const render = Component => {
ReactDOM.render(
<AppContainer>
<Component/>
</AppContainer>,
document.getElementById('root')
)
} render(App)
if (module.hot) {
module.hot.accept('./App', () => {
render(App)
})
}

以上使用module.hot 实现局部刷新,在新版中如下

 import React from 'react';
import ReactDOM from 'react-dom';
import {hot} from 'react-hot-loader/root';
import App from './App';
hot(App); const render = Component => {
ReactDOM.render(
<Component/>,
document.getElementById('root')
)
} render(App)

在react16.6+版本中,在浏览器控制台可能会出现警告

这是因为在react16.6+以后,推荐使用兼容性更好的

@hot-loader/react-dom

来代替react-dom, 可以忽略,如要修正,方法如下:

1 . 先安装

 yarn add @hot-loader/react-dom -D

2 . 更改别名 webpack.config.js

 resolve: {
alias: {
'react-dom': '@hot-loader/react-dom'
}
}

3 . 重新运行项目即可。

React项目中使用hot-react-loader的更多相关文章

  1. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  2. react项目中使用less并修改antd主题样式

    一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...

  3. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  4. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  5. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  6. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  7. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  8. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  9. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  10. redux在react项目中的应用

    今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...

随机推荐

  1. VMware虚拟机下安装ubuntu操作系统

    安装tools:

  2. .NET 简单多线程

    取消跨线程访问 Control.CheckForIllegalCrossThreadCalls = false; 1.开启新线程 无参数 Thread thread = new Thread(方法名) ...

  3. 关于H5页面在iPhoneX适配

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  4. 2018.我的NOIP补全计划

    code: efzoi.tk @ shleodai noip2011 D1 选择客栈 这道题是一道大水题,冷静分析一会就会发现我们需要维护最后一个不合法点和前缀和. 维护最后一个不合法点只要边扫描边维 ...

  5. idea 自定义注释模板

    一.类注释模板 打开Preferences Editor -> File and Code Templates -> Files -> Class 效果图: 注释模板 /** * @ ...

  6. Java 常见异常种类

    Java Exception: 1.Error 2.Runtime Exception 运行时异常3.Exception 4.throw 用户自定义异常 异常类分两大类型:Error类代表了编译和系统 ...

  7. 动态规划-数位DPwindy

    https://vjudge.net/contest/297216?tdsourcetag=s_pctim_aiomsg#problem/L #include<bits/stdc++.h> ...

  8. Linux安装nginx详细步骤

    安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 在/usr/local/下创建一个nginx的文件夹 ...

  9. swust oj 982

    输出利用二叉树存储的普通树的度 1000(ms) 10000(kb) 2619 / 5991 普通树可转换成相应的二叉树(该二叉树的根结点一定缺少右儿子),反之亦然.故而可以根据相应的转换方法去统计某 ...

  10. Python基础之列表深浅复制和列表推导式

    一.列表深浅复制: 浅拷贝内存图如下: 深拷贝内存图如下: 二.列表推导式: 实例: """ 列表推导式 练习:exercise01 """ ...