React Hot Loader 未按预期更新答案

【问题标题】：React Hot Loader not updating as expectedReact Hot Loader 未按预期更新
【发布时间】：2015-09-04 09:05:55
【问题描述】：

我正在使用 react-hot-loader 和 webpack。我还将 webpack-dev-server 与 express 后端一起使用。

这是我用于开发的相关 webpack 配置：

var frontendConfig = config({
  entry: [
    './src/client/app.js',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/dev-server'
  ],
  output: {
    path: targetDir,
    publicPath: PROD ? '/build/assets/' : 'http://localhost:3000/build/assets/' ,
    filename: 'app.js'
  },
  module: {
    loaders: [
      {test: /\.js$/,
       exclude: /node_modules/,
       loaders: PROD ? [babelLoader] : ['react-hot', babelLoader] }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin({ quiet: true })
  ]
});

通过这个配置，我启动 webpack 和 webpack-dev-server

gulp.task('frontend-watch', function() {
    new WebpackDevServer(webpack(frontendConfig), {
      publicPath: frontendConfig.output.publicPath,
      hot: true,
      stats: { colors: true }
    }).listen(3000, 'localhost', function (err, result) {
      if(err) {
        console.log(err);
      }
      else {
        console.log('webpack dev server listening at localhost:3000');
      }
    });
});

所以 webpack-dev-server 在 localhost:3000 运行并从 webpack watcher 接收app.js（现在不再写入文件系统）。

我的快递服务器用作后端/api，并具有以下配置：

var express = require('express');

// proxy for react-hot-loader in dev mode
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({
  changeOrigin: true,
  ws: true
});

var isProduction = process.env.NODE_ENV === 'production';

// It is important to catch any errors from the proxy or the
// server will crash. An example of this is connecting to the
// server when webpack is bundling
proxy.on('error', function(e) {
  console.log('Could not connect to proxy, please try again...');
});

module.exports = function (app) {

    // We only want to run the workflow when not in production
  if (!isProduction) {
    console.log('setting up proxy for webpack-dev-server..');
    // Any requests to localhost:4200/build is proxied
    // to webpack-dev-server
    app.all('assets/app.js', function (req, res) {

      proxy.web(req, res, {
          target: 'http://localhost:3000'
      });
      console.log('request proxied to webpack-dev!');
    });
  }

  var server = require('http').createServer(app);

  app.use(express.static(homeDirectory + '/build'));
  app.use(express.static(homeDirectory + '/files'));

  server.listen(4200);
};

到目前为止一切都很好，app.js 的代理工作，我在浏览器控制台中看到成功的热更新消息：

现在，虽然它看起来不错，但并没有像我预期的那样工作：

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

让我烦恼的另一件事是，如果我像这样工作，并在某个时候重新加载“硬”浏览器，我所做的所有更改都会恢复到我启动 webpack-dev-server 的位置 - 所有热更新两者之间并没有以某种方式持续存在。这也正常吗？我希望我会失去我的状态，但同时不会对代码进行任何更改。这可能与我的app.js 未写入文件系统有关。

【问题讨论】：

标签： reactjs webpack webpack-dev-server

【解决方案1】：

对于您的问题 #2，这是不正常的，我有一个模板 repo，可以在此处使用 HMR，它工作得很好https://github.com/briandipalma/wp-r-template

【讨论】：

【解决方案2】：

对于问题 #1，通常渲染方法显示或格式化数据，而不是从某个地方抓取它。但是如果需要格式化数据，请使用组件外的函数

一旦您检索到价格，父组件将调用以下内容

<ChildComponent price={this.state.price}

ChildComponent 的渲染函数将使用道具（或者更好的是函数的参数）。记住：React 的重点是组合和数据流

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

【讨论】：