React項目中使用hot-react-loader

在構建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 . 從新運行項目便可。