Reactjs 反应热加载程序未按预期更新

我正在使用react热加载程序和网页包。我还将WebpackDevServer与express后端一起使用

这是我的相关开发网页配置：

var frontendConfig=config({
条目：[
“./src/client/app.js”，
'网页包开发服务器/客户端？http://localhost:3000',
“webpack/hot/dev服务器”
],
输出：{
路径：targetDir，
publicPath:PROD？'/build/assets/'：'http://localhost:3000/build/assets/' ,
文件名：“app.js”
},
模块：{
装载机：[
{test:/\.js$/,，
排除：/node_模块/，
加载器：产品？[babelLoader]：['react-hot'，babelLoader]}
]
},
插件：[
新的webpack.HotModuleReplacementPlugin（{quiet:true}）
]
});

使用此配置，我启动webpack和webpack开发服务器

gulp.task（'frontend-watch'，function（）{
新的WebpackDevServer（webpack（frontendConfig）{
publicPath:frontendConfig.output.publicPath，
热：是的，
统计信息：{colors:true}
}).listen（3000，'localhost'，函数（err，result）{
如果（错误）{
控制台日志（err）；
}
否则{
log（'webpack dev server监听localhost:3000'）；
}
});
});

所以WebpackDev服务器运行在localhost:3000上，并从WebpackWatcher（现在不再写入文件系统）接收

app.js

my express server用作后端/api，具有以下配置：

var express=require（'express'）；
//开发模式下react热加载程序的代理
var httpProxy=require（'http-proxy'）；
var proxy=httpProxy.createProxyServer({
来源：对，
ws：是的
});
var isProduction=process.env.NODE_env==“production”；
//从代理或服务器捕获任何错误非常重要
//服务器将崩溃。例如，连接到
//Web包绑定时的服务器
proxy.on（'error'，函数（e）{
console.log（'无法连接到代理，请重试…'）；
});
module.exports=函数（应用程序）{
//我们只想在不生产时运行工作流
如果（！i生产）{
log（'为网页包开发服务器设置代理…）；
//对localhost:4200/build的任何请求都将被代理
//到网页包开发服务器
app.all（'assets/app.js'，函数（req，res）{
proxy.web（请求、回复、{
目标：'http://localhost:3000'
});
log（'request proxy to webpack dev！'）；
});
}
var server=require（'http'）。createServer（应用程序）；
app.use（express.static（homeditory+'/build'）；
app.use（express.static（homeditory+/files））；
服务器监听（4200）；
};

到目前为止一切都很好，

app.js的代理工作正常，我在浏览器控制台中看到成功的热更新消息：


现在，虽然它看起来很好，但并不像我预期的那样起作用：

当我更改组件的render（）方法时，它会按预期进行更新，但当我更改helper方法（在render（）中使用）时，我不会得到任何热更新。这正常吗

另一件让我头疼的事情是，如果我像这样工作，并在某个时候进行“硬”浏览器重新加载，我所做的所有更改都会恢复到我启动webpack dev服务器的位置-其间的所有热更新都不会以某种方式持久化。这也正常吗？我希望我能放松我的状态，但不能同时对代码进行任何更改。这可能与我的
app.js
没有写入文件系统有关
对于你的问题#2，这是不正常的，我有一个模板repo，在这里可以使用HMR，它工作得很好
对于问题#1，通常呈现方法显示或格式化数据，而不是从某处获取数据。但如果需要格式化数据，请使用组件外部的函数

一旦检索到价格，父组件将调用以下命令

<ChildComponent price={this.state.price}


return (
   <div>{this.props.price}</div>
  );