सुपर() किसी भी तर्क के साथ क्या करता है?

Question

मैं docs से प्रतिक्रिया सीख रहा हूं, लेकिन यह सुनिश्चित नहीं है कि super() इस उदाहरण में क्या करता है। आम तौर पर, क्या यह एक नया उदाहरण बनाने के लिए पारित तर्क नहीं लेता है और फिर उदाहरण में इन तर्कों को शामिल करने के लिए React.Component की कन्स्ट्रक्टर विधि को कॉल करता है? बिना किसी तर्क के यह क्या करता है?

class LikeButton extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     liked: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
    this.setState({liked: !this.state.liked}); 
    } 
    render() { 
    const text = this.state.liked ? 'liked' : 'haven\'t liked'; 
    return (
     <div onClick={this.handleClick}> 
     You {text} this. Click to toggle. 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <LikeButton />, 
    document.getElementById('example') 
); 

Answer 1

ES6 में, व्युत्पन्न वर्ग super() कॉल करने के लिए अगर वे एक निर्माता होता है। प्रतिक्रिया में, सभी घटक घटक वर्ग से विस्तारित होते हैं।

आपको वास्तव में प्रत्येक ES6/प्रतिक्रिया वर्ग के लिए एक निर्माता की आवश्यकता नहीं है। यदि कोई कस्टम कन्स्ट्रक्टर परिभाषित नहीं किया गया है, तो यह default constructor का उपयोग करेगा। आधार वर्ग के लिए, यह है:

constructor() {} 

और व्युत्पन्न वर्ग के लिए, डिफ़ॉल्ट निर्माता है:

constructor(...args) { 
    super(...args); 
} 

तुम भी this एक्सेस करने से पहले super() कॉल करने के लिए, this के बाद से super() तक आरंभ नहीं किया है की जरूरत है कहा जाता है ।

प्रतिक्रिया में कस्टम निर्माता का उपयोग करने के कुछ कारण हैं। एक यह है कि आप getInitialState जीवन चक्र विधि का उपयोग करने के बजाय this.state = ... का उपयोग कर कन्स्ट्रक्टर के भीतर प्रारंभिक स्थिति सेट कर सकते हैं।

आप this.someClassMethod = this.someClassMethod.bind(this) के साथ कन्स्ट्रक्टर के अंदर कक्षा विधियों को भी बांध सकते हैं। यह वास्तव में कन्स्ट्रक्टर में विधियों को बांधना बेहतर है क्योंकि वे केवल एक बार बनाए जाएंगे। अन्यथा यदि आप bind पर कॉल करते हैं या कन्स्ट्रक्टर के बाहर कहीं भी बाध्य करने के लिए तीर फ़ंक्शंस का उपयोग करते हैं (जैसे render विधि में), तो यह वास्तव में प्रत्येक रेंडर पर फ़ंक्शन का एक नया उदाहरण बना देगा। उस here के बारे में और पढ़ें।

आप निर्माता में this.props का उपयोग करना चाहते हैं, तो आप एक तर्क के रूप रंगमंच की सामग्री के साथ super कॉल करने की आवश्यकता:

constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
} 

आप करते हैं, तो this.props निर्माता में अपरिभाषित है नहीं है। हालांकि, आप कन्स्ट्रक्टर के बाहर कुछ भी करने की आवश्यकता के बिना कन्स्ट्रक्टर के बाहर कक्षा में कहीं भी this.props तक पहुंच सकते हैं।