Javascript에는 필수 vs .default가 필요합니다.

Javascript에는 필수 vs .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')
    );
  });
}

내가 모르는 건

a) 앱과 Next App을 사용해야 하는 이유는 무엇입니까?아니다App와 같은NextApp같은 파일로부터 Import 되고 있기 때문에?

b) 베스트 프랙티스는,requires코드 선두에 표시됩니다.하지만 나는 이미 그곳에 있다.import App from '../containers/App'. 그래서:

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

해선 안된다App그리고.NextApp똑같아?

c) 종료하기 위해 다음 코드 라인은 동등합니까?퓨어를 사용하는 것이 무슨 차이가 있습니까?require및 arequire .default?

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

기본적인 질문이라면 죄송합니다만, 이 코드를 이해하기 위해서는 어디로 가야 하는지 힌트가 필요합니다.

이를 보다 잘 이해하려면 다른 비반응 케이스에 대해 웹 팩이 핫모듈 로딩 기능을 제공하는 방법을 살펴봐야 합니다.

아이디어는 꽤 간단해 사실...웹 팩은 코드에 발생하는 변경을 감지하고 해당 모듈을 다시 컴파일합니다.단, 모듈 참조 자체를 안전하게 대체할 수는 없습니다.그렇기 때문에 HMR 인터페이스를 직접 실장해야 합니다.module.hot예제 코드를 호출합니다.

새로운 버전의 모듈을 사용할 수 있게 되면 웹 팩은 모듈체인을 올라갑니다(즉, X가 Import한Y와 Y가 변경된 경우 웹 팩은 X > W > V...부터 시작하여 Y 또는 X 또는 W 또는 V 등에 대해 HMR을 구현한 모듈을 검출합니다).거기서부터 체인 전체를 다시 로드합니다.

HMR이 변경을 받아들이지 않고 루트에 도달하면 페이지 전체가 갱신됩니다.

이제 앱과 Next App에 대한 문제...App은 모듈의 정적으로 가져온 버전입니다.기본적으로 모듈은 한 번만 구문 분석되고 로드되므로 앱은 변경되지 않는 일정한 참조를 가리킵니다.이것이 HMR 코드 내에서 변경된 모듈을 수신하는 예에서 다른 변수 NextApp이 사용되는 이유입니다.

마지막으로 require 및 require.default...ES6 Import(내보내기 기본값 MyComponent)를 처리할 때 내보낸 모듈은 {"default" : MyComponent} 형식입니다.그import스테이트먼트는 이 할당을 올바르게 처리하지만, 당신은 다음 작업을 수행해야 합니다.require("./mycomponent").default자신을 변환합니다.HMR 인터페이스 코드는 사용할 수 없습니다.import인라인으로 동작하지 않기 때문입니다.이 문제를 피하고 싶다면module.exportsexport default.

언급URL : https://stackoverflow.com/questions/43247696/javascript-require-vs-require-default