React Hot reload 不应用更改答案

【问题标题】：React Hot reload doesn't apply changesReact Hot reload 不应用更改
【发布时间】：2021-04-03 17:48:06
【问题描述】：

我使用 create-react-app --template typescript 创建了一个应用程序，然后弹出。

我注意到，当我更改 tsx 时，一切都很好。但是对于 ts 文件，它无法正常工作。例如，如果我在 console.log 中添加一个新行，它将在浏览器中打印。

但是如果我改变函数中的一些逻辑，我会看到旧的行为。在浏览器的源代码中，我看到了新的 main.<hash>.hot-update.js 文件。所以交付给了客户，但没有得到应用。

请给我一个建议，告诉我下一步应该在哪里搜索，或者我应该为 webpack 探索哪个插件！

【问题讨论】：

标签： reactjs webpack hot-reload

【解决方案1】：

我找到了问题所在，看起来这不是错误，而是正常行为。整个问题出在信号音上。我在另一个文件中创建了一个类的实例，然后是他没有更新。

// class.ts
export class Foo {
  print() {
    console.log('Instance of Foo');
  }
}

// instance.ts
import { Foo } from './class.ts';

export const foo = new Foo();

// component.tsx
import React from 'react';
import foo from './instance.ts'

export const Component = () => {
  const onClick = () => {
    foo.print() 
  }

  return <div onClick={onClick}>Some Content</div>;
}

【讨论】：