React項目中使用hot-react-loader
阿新 • • 發佈:2019-03-27
yar fig 版本 技術分享 忽略 頁面刷新 one 修改 res
在構建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