1

我正在使用带有 Typescript/React/SpaServices/Webpack/HMR 的 ASP.Net Core。更改 tsx 文件时，HMR 会替换浏览器中的代码。

我的问题是什么功能/程序正在监视文件的更改然后触发重建？webpack 是否使用节点在后台运行？如果是这样，我可以看到该进程正在运行吗？日志等？

4

2 回答 2

3

webpack 是否使用节点在后台运行？

是的，一点没错。这里发生了很多事情，但最终双方都webpack在webpack-dev-middleware处理这个问题。

它从调用 开始UseWebpackDevMiddleware。例如：

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

正如我已经说过的，这里的幕后发生了很多事情，所以我将简要介绍一下其中的主要部分。UseWebpackDevMiddleware这是来自( source )的重要代码行 ：

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

该InvokeExortAsync函数是 ASP.NET Core 和 NodeJs 之间发生通信的地方。该nodeServices变量是 的一个实例HttpNodeInstance，它是 的子级OutOfProcessNodeInstance。该类OutOfProcessNodeInstance在构建时会生成一个 NodeJs 服务器，如下所示（source）：

_nodeProcess = LaunchNodeProcess(startInfo);

This ends up running a NodeJs server using the entrypoint-http.js script file (source). This has a lot of code, but it ends up creating a HTTP server that listens for requests that come out of calls to InvokeExportAsync.

The JavaScript function that is being invoked here, createWebpackDevServer (source), looks like this, with exception-handling removed for brevity:

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

There's a lot of code for the createWebpackDevServer that is being invoked (source), so I won't include it here, but suffice to say it ends up running a connect server (source) that uses the webpack-dev-middleware (source).

I hope that gives enough of an explanation and a starting point for your own exploration.

于 2017-12-23T21:32:38.477 回答
0
  • 组件的状态更改：只有在组件的状态发生更改时才能触发重新渲染。状态可以通过 props 更改或直接 setState 更改来更改。组件获取更新的状态并决定是否应该重新渲染组件。
  • shouldComponentUpdate 方法：默认情况下，shouldComponentUpdate 返回 true。这就是一直更新所有内容的原因。
于 2017-12-22T09:27:47.527 回答