的Javascript需要VS

我使用react-hot-loader需要.DEFAULT和我關於它的示例代碼很困惑：的Javascript需要VS

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和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;

很抱歉，如果這些都是非常基本的問題，但我需要去哪裏，以便更好地理解這段代碼的提示。

來源

2017-04-06 Mendes

爲了更好地理解這一點，您需要查看其他非反應案例如何處理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指向一個永遠不會改變的引用。這就是爲什麼在接收HMR代碼內已更改模塊的示例中使用了另一個變量NextApp。

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

來源

2017-04-06 08:10:15 hazardous

的Javascript需要VS

回答

相關問題