解放F5——React开启模块热更新

解放F5——React开启模块热更新

在一个正在开发的应用中,刷新页面将会降低你的生产效率:你必须得等待页面加载完毕。

一个大的应用可能会花很多秒钟才能刷新完页面。使用 HMR(模块热替换) 可以避免这个缺点。 使用 HMR 最大的好处是你可以保持应用的状态

设想你的应用中有一个对话框,其中包含很多步骤,而现在你正在第三步当中,基本上这就特别奇怪。如果没有 HMR 的话,当你更改源代码的时候你的浏览器将会刷新整个页面,你就不得不再次打开这个对话框,并且从步骤一开始导航到步骤三。而如果你使用 HMR 的话,你的对话框将会始终保持打开 在步骤三的状态。尽管你的源代码改变了,但是应用的状态也会被保持。应用本身会被重新加载,而不是页面被重新加载。

设想你正在使用 console.log() 调试你的代码。由于浏览器不再会刷新页面,所以即使你更改了你的代码,这些调试信息也会完整地保持在你的开发控制台中。这让调试变得很方便

开启方式

模块热替换(HMR)是一个帮助你在浏览器中重新加载应用的工具,并且无需再让浏览器刷新页面。你可以在 create-react-app 中很容易地开启这个工具:

在你 React 的入口文件 src/index.js 中,添加一些配置代码。

src/index.js


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'; ReactDOM.render(
<App />,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}

配置完成。接下来再尝试在你的 src/App.js 文件中更改一下变量 helloWorld,浏览器应该不 会刷新页面,但是应用还是会重新加载并且显示正确的输出。

上一篇:java"=="与equals()方法的对照


下一篇:metamask源码学习-contentscript.js