ReactJS

Question

में निर्यात (डिफ़ॉल्ट) वर्ग यदि मैं कोई घटक बना रहा हूं, ऐसा लगता है कि आप कई अलग-अलग तरीकों से कक्षा बना सकते हैं। इनके बीच क्या अंतर है? मुझे कैसे पता चलेगा कि किस का उपयोग करना है?

import react {Component} from 'react' 

export default class Header extends component { 

} 

export const Header = React.createClass({ 

}) 

export default React.createClass({ 

}) 

मुझे लगता है कि वे अलग-अलग चीजें करते हैं, या यह सिर्फ अलग वाक्यविन्यास है?

अगर कोई मुझे त्वरित स्पष्टीकरण दे सकता है, या एक लिंक, तो मैं वास्तव में इसकी सराहना करता हूं। मैं एक नए ढांचे के साथ शुरू नहीं करना चाहता हूं, यह जानकर कि वास्तव में क्या अंतर है।

Answer 1

हाय और प्रतिक्रिया करने के लिए आपका स्वागत है!

मुझे लगता है कि आपको यहां क्या परेशानी हो रही है इसका हिस्सा वास्तव में प्रतिक्रिया-विशिष्ट नहीं है, बल्कि इसके बजाय नए ES2015 मॉड्यूल सिंटैक्स से संबंधित है। अधिकांश उद्देश्यों और उद्देश्यों के लिए, रिएक्ट क्लास घटकों को बनाते समय आप React.createClass के बारे में सोच सकते हैं जो कार्यात्मक रूप से class MyComponent extends React.Component के बराबर है। एक नया ईएस2015 वर्ग सिंटैक्स का उपयोग कर रहा है जबकि दूसरा प्री-ईएस2015 सिंटैक्स का उपयोग कर रहा है।

मॉड्यूल के बारे में सीखने के लिए, मैं इससे परिचित होने के लिए नए मॉड्यूल सिंटैक्स पर कुछ लेख पढ़ने की सिफारिश करता हूं। यहां शुरू करने के लिए एक अच्छा तरीका है: http://www.2ality.com/2014/09/es6-modules-final.html।

तो संक्षेप में, ये सिर्फ वाक्य रचना में मतभेद हैं, लेकिन मैं एक त्वरित चलने के माध्यम से ऐसा करने का प्रयास करेंगे:

/** 
* This is how you import stuff. In this case you're actually 
* importing two things: React itself and just the "Component" 
* part from React. Importing the "Component" part by itself makes it 
* so that you can do something like: 
* 
* class MyComponent extends Component ... 
* 
* instead of... 
* 
* class MyComponent extends React.Component 
* 
* Also note the comma below 
*/ 
import React, {Component} from 'react'; 


/** 
* This is a "default" export. That means when you import 
* this module you can do so without needing a specific module 
* name or brackets, e.g. 
* 
* import Header from './header'; 
* 
* instead of... 
* 
* import { Header } from './header'; 
*/ 
export default class Header extends Component { 

} 

/** 
* This is a named export. That means you must explicitly 
* import "Header" when importing this module, e.g. 
* 
* import { Header } from './header'; 
* 
* instead of... 
* 
* import Header from './header'; 
*/ 
export const Header = React.createClass({ 

}) 

/** 
* This is another "default" export, only just with a 
* little more shorthand syntax. It'd be functionally 
* equivalent to doing: 
* 
* const MyClass = React.createClass({ ... }); 
* export default MyClass; 
*/ 
export default React.createClass({ 

})