在构建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 . 重新运行项目即可。
原文：https://www.cnblogs.com/hughes5135/p/10609301.html