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