解放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，瀏覽器應該不 會刷新頁面，但是應用還是會重新加載並且顯示正確的輸出。