React开发模式下如何检测对象热重载

Question

我想订阅或以某种方式检测 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
        // ...
    });
}

有什么办法可以做到吗？

谢谢！

Answer 1

AFAIK，热重载不处理单个文件，它总是重新加载整个应用程序。

下面并不完全是您问题的答案，但我正在寻找检测热重载本身。这是谷歌的第一个答案。所以我决定回答其他遇到这个问题的人。

我通过挖掘webpack-dev-server已关闭的问题找到了解决方案。

这个问题，准确来说：

• 有办法热重载清控制台吗？

这是重新加载应用程序时将运行的代码。我使用窗口黑客来防止每次重新加载后添加新事件：

if (module.hot) {
    if (!window.hot) {
        module.hot.addStatusHandler(status => {
            if (status === 'apply') {
                console.log('reload');
            }
        });
    }
    window.hot = true;
}

还有消息事件：

window.addEventListener('message', (e) => {
  if (e.data.type === 'webpackProgress' &&
      e.data.data.percent === 100) {
      console.log('reload');
  }
});

注意：这需要在与第一个代码片段相同的上下文中执行。