在構建react項目時，默認使用的webpack-dev-serve有熱刷新功能，但是局限是修改一處會使整個頁面刷新

當引入了react-hot-loader時，可以實現局部刷新，即同個頁面上，某一處的數據修改不會讓整個頁面一起刷新

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 import {AppContainer} from ‘react-hot-loader‘;
 4 import App from ‘./App‘;
 5 
 6 const render = Component => {
 
 7   ReactDOM.render(
 8     <AppContainer>
10         <Component/>
12     </AppContainer>,
13     document.getElementById(‘root‘)
14   )
15 }
16 
17 render(App)
18 if (module.hot) {
19   module.hot.accept(‘./App‘, () => {
20     render(App)
21   })
22 }

以上使用module.hot 實現局部刷新，在新版中如下

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 import {hot} from ‘react-hot-loader/root‘;
 4 import App from ‘./App‘;
 5 hot(App);
 6 
 7 const render = Component => {
 8   ReactDOM.render(
 9       <Component/>,
10     document.getElementById(‘root‘)
11   )
 
12 }
13 
14 render(App)

在react16.6+版本中，在瀏覽器控制臺可能會出現警告

這是因為在react16.6+以後，推薦使用兼容性更好的

@hot-loader/react-dom

來代替react-dom， 可以忽略，如要修正，方法如下：

1 . 先安裝

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

2 . 更改別名 webpack.config.js

1 resolve: {
2     alias: {
3       ‘react-dom‘: ‘@hot-loader/react-dom‘
4     }
5 }

3 . 重新運行項目即可。

React項目中使用hot-react-loader