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 . 重新运行项目即可。