标签: react-hot-loader

我在我的几个项目中使用了 react 是通过的很好，但这是我最后一次看到有react-hot-reload

1. 什么是 react-hot-loader？
2. 它的用途是什么？
3. Webpack 中的 Hot Module Replacement 和 React Hot Loader 之间的区别？
4. 它会给工作流程带来什么优势？
5. 它是如何工作的

谁能给我解释一下 :)

我想订阅或以某种方式检测 React 应用程序中导入的文件更改。仅开发模式需要此功能。

例如，这段导入 SVG 的代码（我想象它会怎样，但实际上任何其他方式都可以接受）

import myIcon from './myicon.svg';

function IconSet()
{
    webpack.hot.reload.detector(myIcon).on('change', function(oldMyIcon, newMyIcon)
    {
        // Here I can get new myIcon object and process this by myself
        // ...
    });
}

有什么办法可以做到这一点吗？

谢谢！

我正在尝试使用react-hot-loader设置webpack热重装.它似乎主要是工作.我在现有的rails应用程序中使用webpack.

但它不是热重装.每次我的反应代码改变时,它只是触发重载.我得到的错误消息是:

[HMR] Cannot apply update. Need to do a full reload! - dev-server.js:18
[HMR] Error: Aborted because 0 is not accepted - dev-server.js:19
  at hotApply (http://localhost:8080/assets/webpack/bundle.js?body=1:380:31)
  at hotUpdateDownloaded (http://localhost:8080/assets/webpack/bundle.js?body=1:293:13)
  at hotAddUpdateChunk (http://localhost:8080/assets/webpack/bundle.js?body=1:273:13)
  at webpackHotUpdateCallback (http://localhost:8080/assets/webpack/bundle.js?body=1:5:12)
  at http://localhost:8080/assets/webpack0.bd89931b2fa8e2901794.hot-update.js:1:1

Navigated to http://lvh.me:3000/react_page

这是我的webpack.hot.config.js设置:

var path = require('path');
var webpack = require('webpack');

var config = module.exports = {

    // Set 'context' for Rails Asset Pipeline
    context: __dirname,

    entry: {
        App: [
            'webpack-dev-server/client?http://localhost:8080/', // WebpackDevServer host and port
            'webpack/hot/only-dev-server', // "only" …

描述

什么要报告:我下面这组指令如何设置作出反应热loarder.但是,当我进入第3步,我把补丁放入其中时,它会突破到下面的那个.

预期的行为

您认为应该发生什么:应该正常工作

实际行为

环境

React Hot Loader版本:下一步

在项目文件夹中运行这些命令并填写其结果:

1. node -v:7.9.0
2. npm -v:4.2.0

然后,指定:

1. 操作系统:Windows 10
2. 浏览器和版本:最新的Chrome

可重复的演示

https://github.com/abarcenas29/preact-sandbox-v0/blob/wip/hot-reloader/src/main.js

branch:wip-hot-reloader

说明:

• yarn
• yarn run postinstall
• yarn run start:dev

这是我的设置：

const DesktopApp = lazy(() => import(/* webpackChunkName: "DesktopApp" */'./DesktopApp'));
const MobileApp = lazy(() => import(/* webpackChunkName: "MobileApp" */'./MobileApp'));

type Props = { shouldServeMobile: boolean };

export const App = ({ shouldServeMobile }: Props): JSX.Element => (
  shouldServeMobile
    ? (
      <Suspense fallback={<AppLoading />}>
        <MobileApp />
      </Suspense>
    ) : (
      <Suspense fallback={<AppLoading />}>
        {/* GlobalDesktopStyle is injected in multiple places due to a bug where the
          theme gets reset when lazy loading via React.Lazy + webpack */}
        <GlobalDesktopStyle />
        <DesktopApp /> …

我试图用react-hot-loader同webpack-dev-server和react-router,但是当我尝试访问本地主机:3000 /我得到:

Cannot GET /

当然,它在我尝试访问localhost:8000 /时有效.我试图遵循反应热模板,没有成功.

这是我的代码:

server.js

const http = require('http');
const express = require('express');
const consolidate = require('consolidate');
const bodyParser = require('body-parser');
const routes = require('./routes');

const app = express();

app.set('views', 'public/pages'); // Set the folder-name from where you serve the html page.
app.set('view engine', 'html');
app.engine('html', consolidate.handlebars);
app.use(express.static('public')); // Set the folder from where you serve all static files
app.use(express.static('public/dist')); // Set the folder from where you serve …

我正在尝试将ASP.NET Core 2与Webpack 4和React一起使用,我希望热重新加载.问题是; 当我尝试更改其中一个文件时,它会在Chrome中显示此错误:

:8100/dist/__ webpack_hmr无法加载资源:net :: ERR_INCOMPLETE_CHUNKED_ENCODING.

我的package.json:

{
  "name": "ui",
  "private": true,
  "version": "0.1.0",
  "license": "UNLICENSED",
  "description": "Application",
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/jquery": "3.3.1",
    "@types/jsonwebtoken": "^7.2.6",
    "@types/lodash": "4.14.105",
    "@types/moment": "2.13.0",
    "@types/query-string": "^5.1.0",
    "@types/react": "^16.0.40",
    "@types/react-dates": "16.0.5",
    "@types/react-dom": "^15.5.1",
    "@types/react-redux": "^4.4.45",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/react-router-redux": "5.0.3",
    "@types/webpack": "2.2.15",
    "@types/webpack-env": "1.13.0",
    "airbnb-prop-types": "2.8.1",
    "aspnet-prerendering": "3.0.1",
    "aspnet-webpack": "2.0.1",
    "aspnet-webpack-react": "3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "4.0.0",
    "css-loader": "^0.28.11",
    "domain-task": "3.0.3",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "1.1.11",
    "glob": "^7.1.2",
    "history": "4.6.3",
    "install": …

我正在react-hot-loader本地环境中使用它来开发我的 React + Firebase 应用程序。

对于没有 API 调用的基本组件，我可以立即看到更改（它只更新更改的部分）。但是，当我设计一个在内部具有 API 调用的组件（useEffect如下例所示）时，它会不断重新运行所有内容（包括效果），并且我会丢失当前状态。

我更改某些内容后的日志：

我不确定问题是否是由于useEffectAPI 调用引起的。

问题

我怎样才能解决这个问题？就像，如果我更改标签的 CSS 颜色，我希望所有状态保持不变并仅更新更改的部分。

例子：

ComponentWithApiCall.js

function ComponentWithAPICall() {

  const [loading,setLoading] = useState(true);
  const [dataFromAPI,setDataFromAPI] = useState(null);

  useEffect(()=>{

    // CALL API WAIT FOR RESULTS
    setDataFromAPI(result);
    setLoading(false);

  },[]);

  return(
    dataFromAPI &&
      <div>
        // WHATEVER
      </div>
  );
}

这是我当前的配置react-hot-loader。我也在使用webpack和webpack-dev-server。

webpack.dev.js

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true
  },

  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HashedModuleIdsPlugin()
  ], …

当我对组件进行更改时，webpack 会重新编译并响应热交换模块。但是现在我的代码运行n次数n是热模块交换发生的次数。例如，我进行了更改，现在函数运行了两次。我做了另一个更改，函数运行了 3 次。我可以console.log(Date.now())在我的商店的 dispatchToken 中放置一个，我可以看到它是运行n时间。

商店：http : //pastebin.com/PVnyf572

webpack.config.js：http ://pastebin.com/MsziqH9v

我运行 webpack-dev-server webpack-dev-server app/client.js --inline --hot --colors

当我进行复杂的更改时，我经常收到以下错误消息（尽管如果我更改 Store 的第 60 行以将健康状况增加 10 而不是 6，则不会发生这种情况）：

React Hot Loader 似乎没有正确配置。如果您使用 NPM，请确保您的依赖项不会将重复的 React 分发拖到它们的 node_modules 中，并且 require("react") 对应于您渲染应用程序的 React 实例。如果您使用的是 React 的预编译版本，请参阅https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react以获取集成说明。

细节：

我一直在尝试配置我的 React 项目，hot loader以便我可以在无需重新启动服务器的情况下积极开发。每次 websocket 尝试连接时，我都会收到一条连续的错误消息：

WebSocket connection to 'ws://192.168.33.10/sockjs-node/301/eo4p2zps/websocket' failed: Error during WebSocket handshake: Unexpected response code: 404. 我的直觉告诉我，这可能与我运行 Ubuntu -v 的 VM（流浪者）有关14.04.3。除了记录的上述错误之外，我还得到：

http://192.168.33.10/sockjs-node/629/s0dz3nxv/xhr_streaming?t=1482558136743 404 (Not Found)
http://192.168.33.10/sockjs-node/629/jbjciaga/eventsource 404 (Not Found)
http://192.168.33.10/sockjs-node/iframe.html 404 (Not Found)
http://192.168.33.10/sockjs-node/629/e1x0l01e/xhr?t=1482558137388 404 (Not Found)
Warning: [react-router] Location "/sockjs-node/629/dr44jysd/htmlfile?c=_jp.ajy5ad3" did not match any routes
client?e2df:41 [WDS] Disconnected!
Uncaught SyntaxError: Unexpected token <

我还采用了以下样板：https : //github.com/jpsierens/webpack-react-redux，希望能比较我当前的配置，但两者似乎都合适。

配置

webpack.config.js：

'use strict';

var path = require('path');
var webpack = …