केवल प्रतिक्रिया के बजाय प्रतिक्रिया, {घटक} आयात करने का लाभ क्या है?

Question

import React, { Component } from 'react'; 
class Link extends Component { 
    ... 
} 

import React from 'react'; 
class Link extends React.Component { 
    ... 
} 

जब यह 15.4.x प्रतिक्रिया करने के लिए आता है के बजाय

लेखन के प्रमुख लाभ क्या है ??

मेरी परिप्रेक्ष्य में और मेरे मामले में (मुझे ठीक कर लें मैं गलत हूँ) यह बात बिल्कुल के बाद से नहीं करता है:

1. मैं अपने बंडलों बनाने के लिए एक webpack2 उपयोग कर रहा हूँ;
2. मैं विक्रेता कोड से अपने ऐप कोड को विभाजित करने के लिए कोड विभाजन का उपयोग करता हूं;
3. मैं webpack.optimize.CommonsChunkPlugin प्लगइन minChunks: Infinity प्लगइन के साथ यह सुनिश्चित करने के लिए उपयोग करता हूं कि सभी विक्रेता कोड केवल एक बार शामिल हो।

कैसे समझ ES6 आयात काम मुझे समझ से कि {Component} के नाम पर रखा गया आयात का उपयोग करके मैं राज्य है कि मैं अपने कोड है, जो .. क्लीनर लग रहा है में केवल Component घटक का उपयोग करना चाहते हैं। लेकिन चूंकि पूरे React पैकेज अभी भी ऐप में उपयोग किया जाता है, इसलिए मैं के बजाय React.Component से विस्तार के साथ अपनी कक्षाएं बना सकता हूं और नतीजतन वेबपैक अभी भी उसी मात्रा में कोड उत्पन्न करेगा और मेरे बंडल आकार दोनों मामलों में समान होंगे।

क्या मैं सही हूँ?

Answer 1

वहाँ कोई अंतर नहीं है, React.ComponentComponent रूप में एक ही वस्तु है, क्योंकि यह वास्तव में बताते हैं कि आप React पुस्तकालय से Component वस्तु का उपयोग कर रहे दूसरी तरह से, मेरी राय में अधिक सुवक्ता है।

पहले एक एक सदस्य, उल्लेख करने के लिए लगता है, लेकिन, यह जावास्क्रिप्ट, जहां सब कुछ निर्यात वैश्विक नामस्थान के साथ संलग्न किया जाना था की pre modules era से आता है (बस वैश्विक नामस्थान प्रदूषण से बचने के लिए)।

---

कुछ है कि हुड के नीचे हो सकता है:

// this should be assumed as an example only. 

class React { ... } 
class Component { ... } 


React.Component = Component; 

// ES6 
export {Component} 
export default React; 

// ES5 
window.React = React; 

नोट: के रूप में किसी ने कहा, आप भी गुंजाइश लिए चालू रखना React क्योंकि JSX जरूरतों आयात करने के लिए, अगर आप चाहते हैं की जरूरत है, लेकिन यह से बचने के लिए, आप React विश्व स्तर पर (window.React = React)

Answer 2

बेनकाब कर सकते हैं यह आयात बयान:

012,

import React, { Component } from 'react'; 

वास्तव में दो चीजें कर रहा है। यह निर्यात को React के नाम पर आयात करता है (जो केवल एक सम्मेलन है, आप उसे जो भी चाहते हैं उसे कॉल कर सकते हैं)। यह एक नामित निर्यात आयात करता है, Component।

कारण यह है कि डिफ़ॉल्ट React आयात किया गया है वास्तव में जेएसएक्स काम करने के लिए है।जब आपका जेएसएक्स कोड पारदर्शी हो जाता है, तो यह <div> को React.DOM.div() के लिए प्रतिस्थापित करता है, इसलिए React अन्यथा चीजें तोड़नी चाहिए!

दोनों चीजों को अलग से आयात करना मतलब है कि आपका जेएसएक्स काम करता है लेकिन आपको अपने कोड में React.Component के बजाय Component लिखना होगा।

जब आप import कुछ भी from "react" करते हैं, तो पूरी फ़ाइल को किसी भी तरह से शामिल करने जा रहा है - बंडल आकार को कम करने का कोई प्रयास (जैसे डेड कोड एलिमिनेशन, ट्री शेकिंग) एक अतिरिक्त, अलग चरण है, जो नहीं करता है आपके आयात विवरणों पर निर्भर करता है लेकिन आपके द्वारा उपयोग किए जाने वाले कोड के कुछ हिस्सों पर निर्भर करता है।

---

इस पुस्तकालय के मामले में, समझदार बात होता है: डिफ़ॉल्ट निर्यात के बच्चे Component नामित निर्यात Component के रूप में एक ही बात को दर्शाता है।

हालांकि, ध्यान रखें कि यह मामला होने की गारंटी नहीं है! यदि प्रतिक्रिया पुस्तकालय कोड निहित निम्नलिखित:

export default { 
    Component: "foo" 
}; 

export const Component = "bar"; 

फिर React.Component === "foo" और Component === "bar"।