Javascript require require .default

Question

我使用的是react-hot-loader，我对它的示例代码感到非常困惑：

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './containers/App'

ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => {
    const NextApp = require('./containers/App').default;
    ReactDOM.render(
      <AppContainer>
        <NextApp/>
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

我不明白的是：

a)为什么需要使用App和NextApp？App不是和NextApp一样吗，因为它们都是从同一个文件导入的？

b)我认为最好的做法是将requires放在代码的开头。但是我已经有了import App from '../containers/App‘。所以：

import App from './containers/App'
const NextApp = require('./containers/App').default;

App和NextApp不应该是一样的吗？

c)最后，下面的代码行是否等价？使用纯require和require .default有什么区别？

const NextApp = require('./containers/App');
const NextApp = require('./containers/App').default;

抱歉，如果这些是非常基本的问题，但我需要一个提示，在哪里可以更好地理解这段代码。

Answer 1

为了更好地理解这一点，您需要查看其他非react情况下的webpack offers hot module loading。

其实这个想法很简单……Webpack检测到您的代码发生了变化，并重新编译相应的模块。但是，它本身不能安全地替换模块引用。这就是为什么您需要自己实现HMR接口的原因，也是示例代码中的module.hot调用的原因。

当有新版本的模块可用时，Webpack沿着模块链向上移动(即，如果X导入的Y和Y发生了变化，则webpack开始从X>W> V...)直到它找到一个为Y、X、W或V等实现HMR的模块，然后从那里重新加载整个链。

如果它到达根目录而没有任何HMR接受更改，它将刷新整个页面:)。

现在关于应用程序和NextApp..。App是您的模块的静态导入版本。由于默认情况下模块只被解析和加载一次，因此App指向一个永远不会改变的常量引用。这就是在示例中使用另一个变量NextApp的原因，该变量接收HMR代码中更改后的模块。

最后，require和require.default...在处理默认导入(导出默认MyComponent)时，导出模块的格式为{“ES6”：MyComponent}。import语句可以正确地为您处理此赋值，但是，您必须自己进行require("./mycomponent").default转换。HMR接口代码不能使用import，因为它不能内联工作。如果您想避免这种情况，请使用module.exports而不是export default。