常见问题汇总

React 文件热更新入口配置模板

import React from 'react';
import ReactDom from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Entry from '${this.resourcePath.replace(/\\/g, '\\\\')}';
const state = window.__INITIAL_STATE__;
const render = (App)=>{
 // 如果是 SSR 渲染时,请用 hydrate, 否则用 render,主要解决警告问题,不影响实际功能
 ReactDom.hydrate(EASY_ENV_IS_DEV ? <AppContainer><App {...state} /></AppContainer> 
    : <App {...state} />, document.getElementById('app'));
};

if (module.hot) {
  module.hot.accept('${this.resourcePath.replace(/\\/g, '\\\\')}', () => { render(Entry); });
}
render(Entry);

热更新 HMR 生效,但页面没有更新

if (module.hot) {
  module.hot.accept('${this.resourcePath.replace(/\\/g, '\\\\')}', () => { render(Entry); });
}

改成

if (module.hot) {
  module.hot.accept();
}

更多常见问题

https://github.com/easy-team/egg-react-webpack-boilerplate/issues


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
Weex 工程方案 Weex 工程方案
easywebpack-weex 基于 easywebpack 的 Weex Native 和 Weex Web 打包构建解决方案.安装$ npm i easywebpack-weex --save-dev使用const weex = require('easywebpack-weex'); ...
2020-05-31 sky
Next 
asset 前端渲染 asset 前端渲染
背景在 前端渲染模式 章节讲到了基于 React 的一体化的前端渲染模式,好处是不需要借助第三方模板引擎且无效关注静态资源注入问题,但有两个小的功能限制:layout 模板数据绑定能力较弱资源注入不能自己定义,比如 async, crossorigin 等配置针对上面问题 egg-view-r...
2020-05-31 sky