Javascript đòi hỏi vs đòi hỏi .DEFAULT

Question

Tôi đang sử dụng react-hot-loader và tôi rất bối rối về mã ví dụ của nó:

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

Những gì tôi không undestand là:

a) Tại sao tôi cần thế nào để sử dụng ứng dụng và NextApp? Không phải là App giống như NextApp, vì chúng được nhập từ cùng một tệp?

b) Tôi nghĩ thực tiễn tốt nhất là giữ requires ở đầu mã. Nhưng tôi đã có import App from '../containers/App '. Vì vậy:

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

Không nên App và NextApp là giống nhau?

c) Để kết thúc, các dòng mã sau có tương đương không? Sự khác biệt khi sử dụng số require thuần túy và số require .default là gì?

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

Xin lỗi nếu đó là những câu hỏi rất cơ bản, nhưng tôi cần gợi ý về nơi cần tìm hiểu rõ hơn về mã này.

Answer 1

Để hiểu điều này tốt hơn, bạn cần xem cách webpack offers hot module loading đối với các trường hợp không phản ứng khác.

Ý tưởng này khá đơn giản ... Webpack phát hiện các thay đổi xảy ra với mã của bạn và biên dịch lại các mô-đun tương ứng. Tuy nhiên, nó không thể thay thế một cách an toàn các tham chiếu mô-đun trên chính nó. Đây là lý do tại sao bạn cần tự mình thực hiện giao diện HMR, do đó cuộc gọi module.hot trong mã ví dụ của bạn.

Khi có phiên bản mới hơn của mô-đun, Webpack sẽ đi lên chuỗi mô-đun (ví dụ: nếu X đã nhập Y và Y đã thay đổi, webpack bắt đầu đi từ X> W> V ...) cho đến khi tìm thấy mô-đun đã triển khai HMR cho Y hoặc X hoặc W hoặc V vv. Sau đó, nó tải lại toàn bộ chuỗi từ đó.

Nếu nó đến thư mục gốc mà không có bất kỳ HMR nào chấp nhận thay đổi, nó sẽ làm mới toàn bộ trang :).

Bây giờ Vấn đề của ứng dụng và NextApp ... Ứng dụng là phiên bản được nhập tĩnh của mô-đun của bạn. Vì các mô-đun được phân tích cú pháp và chỉ nạp một lần theo mặc định, Ứng dụng trỏ đến một tham chiếu liên tục không bao giờ thay đổi. Đây là lý do tại sao một biến NextApp khác được sử dụng trong ví dụ nhận được mô-đun đã thay đổi trong mã HMR.

Cuối cùng, yêu cầu và require.default ... khi xử lý nhập ES6 (mặc định xuất MyComponent), mô-đun đã xuất có định dạng {"mặc định": MyComponent}. Câu lệnh import xử lý chính xác nhiệm vụ này cho bạn, tuy nhiên, bạn phải tự mình thực hiện chuyển đổi require("./mycomponent").default. Mã giao diện HMR không thể sử dụng import vì mã này không hoạt động nội tuyến. Nếu bạn muốn tránh điều đó, hãy sử dụng module.exports thay vì export default.