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