Javascriptが私は<a href="https://github.com/gaearon/react-hot-loader/tree/master/docs" rel="noreferrer">react-hot-loader</a>を使用していると私は、そのサンプルコードについては非常に困惑している

Question

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

私はundestandしません何がある：

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

はこれをよりよく理解するためには、他の非反応例のためどのようにwebpack offers hot module loadingを見てする必要があります。

アイデアは実際には非常に簡単です... WebPACKのは、あなたのコードに起こった変更を検出し、対応するモジュールを再コンパイルします。ただし、モジュール参照はその場で安全に置き換えることはできません。このため、自分でHMRインターフェイスを実装する必要があります。そのため、サンプルコードにmodule.hotという呼び出しがあります。

モジュールの新しいバージョンが利用可能になると、Webpackはモジュールチェーンを上って行きます（つまり、XインポートされたYとYが変更された場合、WebpackはX> W> V ...から開始されます） YまたはXまたはWまたはVなどのHMRを実装しました。そしてそこからチェーン全体をリロードします。

それが変更を受け入れる任意のHMRなしルートに到達した場合は、ページ全体の:)をリフレッシュします。

今のAppとNextAppの問題...アプリケーションは、あなたのモジュールの静的輸入版です。モジュールはデフォルトで1回だけ解析され、ロードされるので、変更されない定数参照を指しています。このため、HMRコード内で変更されたモジュールを受け取る例では、別の変数NextAppが使用されています。 ES6輸入（輸出デフォルトMyComponentの）を扱うとき

最後に、...必要とrequire.default、エクスポートモジュールの形式{：MyComponentの「デフォルト」}です。 importステートメントはこの割り当てを正しく処理しますが、require("./mycomponent").default変換を自分で行う必要があります。インラインで動作しないため、HMRインターフェイスコードはimportを使用できません。それを避けたい場合は、export defaultの代わりにmodule.exportsを使用してください。