react使用react-hot-loader实现局部热更新


Q:webpack-dev-server 已经是热加载,为何还要在 react 项目还要安装 react-hot-loader 呢?

A:其实这两者的更新是有区别的,webpack-dev-server 的热加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面,它只替换了修改的代码,做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件。

npm install --save-dev react-hot-loader 在入口文件(index.js)中引入import { AppContainer } from 'react-hot-loader'; 如果使用了react-router: step1:引入import Route from './router/'; step2: const render = Component => { ReactDOM.render( <AppContainer>
        <Component />
    </AppContainer>, document.getElementById("root")); } render(Route); // Webpack Hot Module Replacement API
if (module.hot) { module.hot.accept('./router/', () => { render(Route); }) } step3:在webpack.config.dev.js中配置 react-hot-loader/patch entry: [ 'babel-polyfill', 'react-hot-loader/patch', require.resolve('./polyfills'), ]

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM