Javascript require vs require.default

我正在使用，我对它的示例代码感到非常困惑：

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')
    );
  });
}

App

和

nextap

不应该相同吗

c） 最后，以下代码行是否等效？使用纯

require

和

require.default

有什么区别

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

---

如果这些是非常基本的问题，很抱歉，但是我需要一个关于如何更好地理解此代码的提示。

要更好地理解这一点，您需要了解如何处理其他非反应情况

这个想法其实很简单。。。Webpack检测代码发生的更改并重新编译相应的模块。但是，它本身无法安全地替换模块引用。这就是为什么您需要自己实现HMR接口，因此在示例代码中调用

module.hot

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

如果它到达根目录而没有任何HMR接受更改，则刷新整个页面：）

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

最后，require和require.default。。。处理ES6导入（导出默认MyComponent）时，导出的模块的格式为{“default”：MyComponent}。

import

语句为您正确处理此分配，但是，您必须自己执行

require（“/mycomponent”）。默认值为

转换。HMR接口代码不能使用

import

，因为它不能内联工作。如果要避免这种情况，请使用

module.exports

而不是

exportdefault

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