używam reagujący na hot-loader i jestem bardzo zdezorientowany jego przykładowym kodem:
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')
);
});
}
To, czego nie lubię, to:
a) Dlaczego muszę korzystać z aplikacji i NextApp? Nie jest App taki sam jak NextApp, ponieważ są one importowane z tego samego pliku?
b) Sądziłem, że najlepsze praktyki należy zachować requires na początku kodu. Ale już mam import App from '../containers/App". Więc:
import App from './containers/App'
const NextApp = require('./containers/App').default;
Nie powinno App i NextApp być takim samym ?
c) Aby zakończyć, czy poniższe linie kodu są równoważne? Jaka jest różnica za pomocą czystej require i a require .default ?
const NextApp = require('./containers/App');
const NextApp = require('./containers/App').default;
Przepraszam, jeśli to są bardzo podstawowe pytania, ale potrzebuję podpowiedzi, gdzie iść, aby lepiej zrozumieć ten kod.
Aby to lepiej zrozumieć, musisz przyjrzeć się, jak webpack oferuje ładowanie gorącego modułu w przypadku innych przypadków braku reakcji.
Pomysł jest dość prosty ... Webpack wykrywa zmiany zachodzące w twoim kodzie i rekompiluje odpowiednie moduły. Jednak nie może bezpiecznie zastąpić odniesień do modułów w locie. Dlatego musisz sam wdrożyć interfejs HMR, stąd module.hot wywołaj swój przykładowy kod.
Gdy dostępna jest nowsza wersja modułu, Webpack przechodzi do łańcucha modułów (tzn. Jeśli X zaimportował Y i Y uległo zmianie, to pakiet rozpoczyna się od X> W> V ...), dopóki nie znajdzie modułu, który zaimplementował HMR dla Y lub X lub W lub V itd. Następnie odświeża cały łańcuch.
Jeśli dojdzie do katalogu głównego bez akceptowania zmiany przez HMR, odświeża całą stronę :).
Teraz kwestią aplikacji i NextApp ... App jest statycznie zaimportowana wersja twojego modułu. Ponieważ moduły są analizowane i ładowane tylko raz domyślnie, aplikacja wskazuje stałe odwołanie, które nigdy się nie zmienia. Dlatego w przykładzie, który otrzymuje zmieniony moduł w kodzie HMR, używana jest kolejna zmienna NextApp.
Na koniec, require and require.default ... w przypadku importowania ES6 (export domyślny MyComponent), wyeksportowany moduł ma format {"default": MyComponent}. The import instrukcja poprawnie obsługuje to zadanie dla ciebie, jednak musisz to zrobić require("./mycomponent").default nawróć się. Kod interfejsu HMR nie może być użyty import ponieważ nie działa w linii. Jeśli chcesz tego uniknąć, użyj module.exports zamiast export default.