ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
官网原话:React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components. 有人会问 webpack-dev-server 已经是热加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢?其实这两者的更新是有区别的,webpack-dev-server 的热加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面,它只替换了修改的代码,做到了页面的局部刷新。 简单的讲,就是使用 react 编写代码时,能让修改的部分自动刷新。但这和自动刷新网页是不同的,因为 hot-loader 并不会刷新网页,而仅仅是替换你修改的部分,也就是上面所说的 without losing state。 下面来说说怎么来配置 react-hot-loader 。 我是通过官方的create-react-app创建的项目的修改 步骤1: ~~~ 安装 react-hot-loader npm install --save-dev react-hot-loader ~~~ 步骤2:在 webpack.config.dev.js 的 entry 值里加上 react-hot-loader/patch,一定要写在entry 的最前面,如果有 babel-polyfill 就写在 babel-polyfill 的后面。 ~~~ entry: [ // We ship a few polyfills by default: require.resolve('./polyfills'), // add react-hot-loaders by algate require.resolve('react-hot-loader/patch'), ] ~~~ 网上好多人都没有写require.resolve(),直接把上述代码放进去也ok哦 步骤3: 最后这个操作就是在页面的主入口,比如我的是 index.js 添加些代码 ~~~ import App from './page/App'; import { AppContainer } from 'react-hot-loader'; // 新添加 const render = (App) => { ReactDOM.render( <AppContainer><App /></AppContainer>, document.getElementById('root') ); } render(App) // Hot Module Replacement API if (module.hot) { module.hot.accept('./page/App', () => { render(App) }) } ~~~ 大功告成,去页面实践下吧!