文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

利用react-hot-loader实现局部更新

2018年12月27日 发布 阅读(303) 作者:懒炖

利用react-hot-loader实现局部更新,webpack也有热加载,但跟react-hot-loader还是不一样的。webpack是代码修改后,自动渲染整个页面。react-hot-loader是不在改变状态的前提下,局部渲染

安装

  1. npm install --save-dev react-hot-loader

步骤

一、启用webpack热加载
  1. "scripts":{
  2. "start": "webpack-dev-server --hot"
  3. }

或配置文件里设置 hot:true

  1. devServer: {
  2. hot: true
  3. }
二、设置webpack插件
  1. plugins: [
  2. new webpack.HotModuleReplacementPlugin()
三、设置webpack入口文件

react-hot-loader/patch必须放在entry第一位,如果第一位必须是polyfill,就放第二位

  1. entry: [
  2. 'babel-polyfill',
  3. 'react-hot-loader/patch'
  4. __dirname + '/app/apps'
四、设置babel

.babelrcbabel.config.js里配置plugins

  1. {
  2. "plugins": ["react-hot-loader/babel"]
  3. }

五、修改主入口文件

如果主入口文件是app/index.js
将顶级组件都包含在<AppContainer>中,注意<AppContainer>只能包含一个React组件

  1. import React from 'react';
  2. import { render } from 'react-dom';
  3. import { AppContainer } from 'react-hot-loader';
  4. import Root from './containers/Root';
  5. import { configureStore, history } from './store/configureStore';
  6. import './app.global.css';
  7. const store = configureStore();
  8. render(
  9. <AppContainer>
  10. <Root store={store} history={history} />
  11. </AppContainer>,
  12. document.getElementById('root')
  13. );
  14. if (module.hot) {
  15. module.hot.accept('./containers/Root', () => {
  16. // eslint-disable-next-line global-require
  17. const NextRoot = require('./containers/Root').default;
  18. render(
  19. <AppContainer>
  20. <NextRoot store={store} history={history} />
  21. </AppContainer>,
  22. document.getElementById('root')
  23. );
  24. });
  25. }

OK,通过上面五步就可以配置成功了

参考

https://gaearon.github.io/react-hot-loader/getstarted/

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •