HMサービスでSpaServicesを使用してwebpack-bundleを再構築する原因は何ですか？

Question

私はTypescript/React/SpaServices/Webpack/HMRでASP.Netコアを使用しています。 tsxファイルを変更すると、HMRがブラウザのコードを置き換えます。

どのような関数/プログラムがファイルの変更を監視していて、再構築をトリガーしているのですか？ノードを使用してwebpackをバックグラウンドで実行していますか？もしそうなら、そのプロセスが実行中であることを確認できますか？ログなど？

Answer 1

nodeを使用してwebpackをバックグラウンドで実行していますか？

はい、絶対に。ここでは多くのことが起こっていますが、最終的にはwebpackとwebpack-dev-middlewareの両方がこれを処理しています。

UseWebpackDevMiddlewareの呼び出しから始まります。例えば：私はすでに言ったように

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions 
{ 
    HotModuleReplacement = true 
}); 

、そこここに舞台裏で起こってたくさんだ、私はちょうど遊んで主要部分の概要を説明します。ここでUseWebpackDevMiddleware（source）からコードの重要な行は次のとおり

nodeServices.InvokeExportAsync<WebpackDevServerInfo>(
    nodeScript.FileName, 
    "createWebpackDevServer", 
    JsonConvert.SerializeObject(devServerOptions)).Result; 

ASP.NETコアとNodeJsとの間の通信が発生するInvokeExortAsync関数です。 nodeServices変数はHttpNodeInstanceのインスタンスで、子はOutOfProcessNodeInstanceです。それが構築されていますときOutOfProcessNodeInstanceクラスがそう（source）のように、NodeJsサーバを生成します：

_nodeProcess = LaunchNodeProcess(startInfo); 

これは、エントリポイント-http.jsスクリプトファイル（source）を使用して、NodeJsサーバーを実行して終了します。これには多くのコードが含まれていますが、最終的には、呼び出されたリクエストをlistenするHTTPサーバーを作成してInvokeExportAsyncにします。

ここで呼び出されているJavaScript関数、createWebpackDevServer（source）は、例外処理簡潔にするため削除して、次のようになります。

export function createWebpackDevServer(callback) { 
    let aspNetWebpack = require('aspnet-webpack'); 
    return aspNetWebpack.createWebpackDevServer.apply(this, arguments); 
} 

コードの多くは、が呼び出されてcreateWebpackDevServerのためにあります（source）ですのでここでは取り上げませんが、webpack-dev-middleware（source）を使用して接続サーバー（source）を実行することになります。

私はあなた自身の探査のための十分な説明と出発点を与えることを願っています。

Answer 2

• コンポーネントの状態変化：再レンダリングコンポーネントの状態が変化した場合にのみトリガすることができます。状態は、小道具の変更、または直接setState変更から変更することができます。コンポーネントは更新された状態を取得し、コンポーネントを再レンダリングするかどうかを決定します。
• shouldComponentUpdateメソッド：デフォルトでshouldComponentUpdateはtrueを返します。それが常にすべてのものを更新する原因です。