- 30
- 0
按照文档配置 https://github.com/gaearon/re... 当修改文件中的state的name字段时,页面不会更新,但是修改render函数中的button text,页面就会更新?
"dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js"
base config
const path = require('path');
const APP_PATH = path.resolve(__dirname, '../app');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
entry: {
app: './app/index.js',
vendors: ['react', 'react-dom']
},
output: {
filename: 'js/bundle.js',
path: DIST_PATH
},
module: {
rules: [
{
test: /\.js?$/,
use: 'babel-loader',
include: APP_PATH
}
]
}
};
dev config
module.exports = merge(baseWebpackConfig, {
mode: 'development',
output: {
filename: 'js/[name].[hash:16].js'
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
inject: 'body',
minify: {
html5: true
},
hash: false
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
port: '3015',
contentBase: path.join(__dirname, '../public'),
compress: true, // gzip
historyApiFallback: true,
hot: true, // 启用 webpack 的模块热替换特性
https: false,
noInfo: false,
open: true, // open the browser
proxy: {}
}
});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React from 'react';
import { hot } from 'react-hot-loader';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'world',
show: true
};
}
render() {
return <div>
{this.state.show && <button>button</button>}
<h1>Hello, {this.state.name}</h1>
</div>;
}
}
export default hot(module)(App);
console在代码更新后可以打印log,但是页面不更新,什么原因?
[WDS] 91% - additional asset processing.
client:127 [WDS] 92% - chunk asset optimization.
client:127 [WDS] 92% - after chunk asset optimization.
client:127 [WDS] 93% - asset optimization.
client:127 [WDS] 93% - after asset optimization.
client:127 [WDS] 94% - after seal.
client:127 [WDS] 95% - emitting.
client:127 [WDS] 95% - emitting (HtmlWebpackPlugin).
2VM5824 client:127 [WDS] 98% - after emitting.
2VM5824 client:127 [WDS] 100% - Compilation completed.
VM5824 client:218 [WDS] App hot update...
VM5849 log.js:24 [HMR] Checking for updates on the server...
client:218 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Nothing hot updated.
log.js:24 [HMR] App is up to date.
VM5849 log.js:24 [HMR] Updated modules:
VM5849 log.js:24 [HMR] - ./app/App.js
VM5849 log.js:24 [HMR] App is up to date.
- 共 0 条
- 全部回答
-
Renounceヾ(放弃) 普通会员 1楼
在使用Webpack4和React Hot Loader时,如果state页面不能热更新,可能是由于以下原因:
-
状态管理错误:在状态页面中,你需要正确地管理状态。例如,你可能需要使用React的useReducer函数来管理状态,或者使用Redux等状态管理库。
-
React组件更新顺序:在React中,组件的更新顺序可能会影响state的更新。例如,如果你在组件A的state中添加了新的数据,然后在组件B中使用这个数据,那么组件B的state可能不会立即更新。
-
在线或离线模式:在使用Webpack4和React Hot Loader时,你需要在不同模式下正确地管理状态。例如,在离线模式下,你可能需要在代码中手动调用React的API来获取state。
-
状态的类型:在Webpack4中,状态的类型可能会影响state的更新。例如,如果你在状态中使用了字符串或对象作为状态类型,那么在React中,这些类型的state可能无法被热更新。
解决这些问题的方法可能包括:
-
修复状态管理错误:确保你的状态管理函数正确地处理了state的变化。
-
重新考虑React组件更新顺序:考虑使用Redux等状态管理库来解决这个问题。
-
使用在线或离线模式:根据你的需求来选择在线或离线模式。
-
更改状态的类型:根据你的需求来选择不同的状态类型。
希望这些信息对你有所帮助!
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
