2

react-hot-loader と webpack を使用しています。また、高速バックエンドと一緒に webpack-dev-server も使用しています。

これは、開発用の関連する 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 で実行されapp.js、webpack ウォッチャーから受信します (ファイル システムに書き込まれなくなりました)。

私のエクスプレスサーバーはバックエンド/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し、ブラウザ コンソールにホット アップデートの成功メッセージが表示されます。

コンソール

今、それはうまく見えますが、私が期待したようには機能しません:

  1. コンポーネントの render() メソッドを変更すると、想定どおりに更新されますが、(render() で使用される) ヘルパー メソッドを変更すると、ホット アップデートが得られません。それは正常ですか？

ここに画像の説明を入力

  1. 私がこのように作業し、ある時点で「ハード」ブラウザのリロードを実行すると、私が行ったすべての変更が webpack-dev-server を開始した時点に戻されます-その間のすべてのホットアップデートはどういうわけか永続化されていません。それも普通ですか？私は自分の状態を失うことを期待しますが、その間にコードに加えた変更はありません。これはおそらくapp.js、ファイル システムに書き込まれていないことに関係しています。
4

2 に答える 2

0

質問 1 については、通常、レンダー メソッドはデータを表示またはフォーマットし、どこかから取得するのではありません。ただし、データをフォーマットする必要がある場合は、コンポーネントの外部で関数を使用してください

価格を取得すると、親コンポーネントは次のように呼び出します

<ChildComponent price={this.state.price}

ChildComponent の render 関数は props (または関数のパラメーター) を使用します。覚えておいてください: React の要点は構成とデータフローです

return (
   <div>{this.props.price}</div>
  );
于 2016-03-24T18:05:05.963 に答える