React项目中使用hot-react-loader

在构建react项目时，默认使用的webpack-dev-serve有热刷新功能，但是局限是修改一处会使整个页面刷新

当引入了react-hot-loader时，可以实现局部刷新，即同个页面上，某一处的数据修改不会让整个页面一起刷新

 import React from 'react';
 import ReactDOM from 'react-dom';
 import {AppContainer} from 'react-hot-loader';
 import App from './App';
 
 const render = Component => {
   ReactDOM.render(
     <AppContainer>
         <Component/>
     </AppContainer>,
     document.getElementById('root')
   )
 }
 
 render(App)
 if (module.hot) {
   module.hot.accept('./App', () => {
     render(App)
   })
 }

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

 import React from 'react';
 import ReactDOM from 'react-dom';
 import {hot} from 'react-hot-loader/root';
 import App from './App';
 hot(App);
 
 const render = Component => {
   ReactDOM.render(
       <Component/>,
     document.getElementById('root')
   )
 }
 
 render(App)

在react16.6+版本中，在浏览器控制台可能会出现警告

这是因为在react16.6+以后，推荐使用兼容性更好的

@hot-loader/react-dom

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

1 . 先安装

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

2 . 更改别名 webpack.config.js

 resolve: {
     alias: {
       'react-dom': '@hot-loader/react-dom'
     }
 }

3 . 重新运行项目即可。