解放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，浏览器应该不 会刷新页面，但是应用还是会重新加载并且显示正确的输出。