React项目中使用hot-react-loader

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在构建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 的全部内容， 来源链接： utcz.com/z/383279.html

回到顶部