Javascript require vs 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 。 所以：

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

為了更好地理解這一點，您需要了解webpack如何為其他非反應情況提供熱模塊加載 。

實際上這個想法很簡單...... Webpack檢測到代碼發生的變化並重新編譯相應的模塊。 但是，它無法安全地替換模塊引用本身。 這就是你需要自己實現HMR接口的原因，因此你的示例代碼中會調用module.hot 。

當一個較新版本的模塊可用時，Webpack上升到模塊鏈（即，如果X導入Y和Y已經改變，webpack開始從X> W> V ...）直到它找到一個實現HMR的模塊Y或X或W或V等然后從那里重新加載整個鏈。

如果它到達根目錄而沒有任何HMR接受更改，它會刷新整個頁面:)。

現在App和NextApp的問題... App是你模塊的靜態導入版本。 由於模塊在默認情況下僅被解析和加載一次，因此App指向永不改變的常量引用。 這就是在示例中使用另一個變量NextApp的原因，該變量接收HMR代碼中的已更改模塊。

最后，require和require.default ...在處理ES6導入（導出默認MyComponent）時，導出的模塊的格式為{“default”：MyComponent}。 import語句正確地為您處理此分配，但是，您必須自己執行require("./mycomponent").default轉換。 HMR接口代碼不能使用import因為它不能內聯工作。 如果要避免這種情況，請使用module.exports而不是export default 。