जावास्क्रिप्ट की आवश्यकता बनाम

Question

मैं react-hot-loader उपयोग कर रहा हूँ .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') 
    ); 
    }); 
} 

क्या मैं समझने के नहीं है:

क) क्यों मैं क्या ज़रूरत है ऐप और नेक्स्ट ऐप का उपयोग करने के लिए? AppNextApp जैसा नहीं है, क्योंकि उन्हें एक ही फ़ाइल से आयात किया जाता है?

बी) मैंने सोचा कि कोड की शुरुआत में requires रखने के लिए सर्वोत्तम प्रथाओं का पालन करना होगा। लेकिन वहां मेरे पास पहले से ही import App from '../containers/App 'है। तो:

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

App और NextApp ही नहीं होना चाहिए?

सी) समाप्त करने के लिए, निम्नलिखित कोड लाइन समकक्ष है? शुद्ध require और require .default का उपयोग करके क्या अंतर है?

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

क्षमा करें अगर उन बहुत ही बुनियादी सवाल कर रहे हैं, लेकिन मैं जहां बेहतर इस कोड को समझने के लिए जाने के लिए पर एक संकेत की जरूरत है।

Answer 1

इसे बेहतर समझने के लिए, आपको अन्य गैर-प्रतिक्रिया मामलों के लिए webpack offers hot module loading पर ध्यान देना होगा।

विचार वास्तव में काफी सरल है ... वेबपैक आपके कोड में होने वाले परिवर्तनों का पता लगाता है और संबंधित मॉड्यूल को पुन: संकलित करता है। हालांकि, यह फ्लाई पर मॉड्यूल संदर्भों को सुरक्षित रूप से प्रतिस्थापित नहीं कर सकता है। यही कारण है कि आपको स्वयं एचएमआर इंटरफ़ेस को लागू करने की आवश्यकता है, इसलिए module.hot अपने उदाहरण कोड में कॉल करें।

जब मॉड्यूल का एक नया संस्करण उपलब्ध होता है, तो वेबपैक मॉड्यूल श्रृंखला को चलाता है (यानी, यदि एक्स आयातित वाई और वाई बदल गया है, तो वेबपैक एक्स> डब्ल्यू> वी ... से जा रहा है जब तक कि यह मॉड्यूल नहीं पाता जिसने वाई या एक्स या डब्ल्यू या वी आदि के लिए एचएमआर लागू किया। फिर यह वहां से पूरी श्रृंखला को फिर से लोड करता है।

यदि यह किसी भी एचएमआर परिवर्तन को स्वीकार किए बिना रूट तक पहुंचता है, तो यह पूरे पृष्ठ को रीफ्रेश करता है :)।

अब ऐप और नेक्स्ट ऐप का मामला ... ऐप आपके मॉड्यूल का स्थिर रूप से आयातित संस्करण है। चूंकि मॉड्यूल को डिफ़ॉल्ट रूप से पार्स किया जाता है और लोड किया जाता है, ऐप एक निरंतर संदर्भ को इंगित करता है जो कभी नहीं बदलता है। यही कारण है कि एक और चर अगला NextApp उदाहरण में प्रयोग किया जाता है जो एचएमआर कोड के भीतर परिवर्तित मॉड्यूल प्राप्त करता है।

अंत में, आवश्यकताएं और आवश्यकताएँ .default ... ES6 आयात (निर्यात डिफ़ॉल्ट MyComponent) से निपटने पर, निर्यातित मॉड्यूल प्रारूप \ "डिफ़ॉल्ट": MyComponent} का है। import कथन सही ढंग से आपके लिए इस असाइनमेंट को संभालता है, हालांकि, आपको require("./mycomponent").default रूपांतरण स्वयं करना है। एचएमआर इंटरफ़ेस कोड import का उपयोग नहीं कर सकता क्योंकि यह इनलाइन काम नहीं करता है। यदि आप इससे बचना चाहते हैं, तो export default के बजाय module.exports का उपयोग करें।