ES6 और ReactJS के साथ काम करते समय बाध्य का उपयोग करना आवश्यक क्यों है?

Question

ReactJS साथ ES5 विकास का उपयोग करना, एक घटक के रूप में निम्नलिखित कहा जा सकता है:

var MyComponent = React.createClass({ 
    alertSomething: function(event) { 
    alert(event.target); 
    }, 

    render: function() { 
    return (
     <button onClick={this.alertSomething}>Click Me!</button> 
    ); 
    } 
}); 

ReactDOM.render(<MyComponent />); 

इस उदाहरण में, this संदर्भ वस्तु ही है, जो उम्मीद प्राकृतिक व्यवहार है।

प्रश्न

मेरा प्रश्न है:

कैसे आप ES6 का उपयोग घटकों बनाने के लिए?

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    alertSomething(event) { 
    alert(event.target); 
    } 

    render() { 
    return (
     <button onClick={this.alertSomething.bind(this)}>Click Me!</button> 
    ); 
    } 
} 

ReactDOM.render(<MyComponent />); 

कि जावास्क्रिप्ट में जानने के बाद this संदर्भ instantiated वस्तु ही जब नए ऑपरेटर का उपयोग, किसी ने मुझे बता सकते हैं बाँध का उपयोग करने का वास्तविक उद्देश्य क्या है? यह प्रतिक्रिया के आंतरिक तंत्र से संबंधित कुछ है?

Answer 1

bind सिर्फ मूल जावास्क्रिप्ट है। यह बाध्यकारी घटनाओं कैसे काम करता है। यह एक प्रतिक्रिया अवधारणा नहीं है।

निम्न आलेख इसे बहुत अच्छी तरह से समझाता है।

जावास्क्रिप्ट में बाउंड फ़ंक्शन एक ऐसा फ़ंक्शन है जो किसी दिए गए संदर्भ से जुड़ा हुआ है। इसका मतलब यह है कि आप इसे कैसे कहते हैं, कॉल का संदर्भ वही रहेगा।

नियमित फ़ंक्शन से बाध्य कार्य बनाने के लिए, बाइंड विधि का उपयोग किया जाता है। बाइंड विधि उस संदर्भ को लेती है जिसमें आप अपने कार्य को पहले तर्क के रूप में बांधना चाहते हैं। शेष तर्क तर्क हैं जो हमेशा इस तरह के कार्य को पारित किया जाएगा। परिणामस्वरूप यह एक बाध्य कार्य देता है।

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

इसके अलावा, एक तरफ ध्यान दें पर, आप अपने घटना, अपने निर्माता में बाध्यकारी अपने विधि प्रस्तुत करना में नहीं के सभी करना चाहिए। यह कई बाइंड कॉल को रोक देगा।

यहां विषय पर एक और अच्छी जानकारी है। वे कहते हैं कि:

हम ES6 वर्गों प्रतिक्रिया सुझाव है कि आप निर्माता में अपने ईवेंट हैंडलर्स बाँध इसलिए वे केवल हर मामले

https://facebook.github.io/react/docs/reusable-components.html

Answer 2

में bind के प्रयोजन से एक के लिए एक बार बाध्य कर रहे हैं यह है कि आपको मैन्युअल रूप से बांधना है।

नहीं Autobinding

तरीके नियमित ES6 वर्ग के रूप में एक ही अर्थ विज्ञान का पालन करें, जिसका अर्थ है कि> वे स्वचालित रूप से उदाहरण के लिए इस बाँध नहीं है। आपको> स्पष्ट रूप से उपयोग करना होगा।बाँध (यह) या तीर कार्यों =>:

हमारा सुझाव है कि आप निर्माता में अपने ईवेंट हैंडलर्स बाँध तो वे> केवल हर उदाहरण के लिए एक बार बाध्य कर रहे हैं:

constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
    this.tick = this.tick.bind(this); // manually binding in constructor 
} 

आप से अधिक पढ़ सकते हैं डॉक्स: https://facebook.github.io/react/docs/reusable-components.html

Answer 3

var cat = { 
    sound: 'Meow!', 
    speak: function() { console.log(this.sound); } 
}; 

cat.speak(); // Output: "Meow!" 

var dog = { 
    sound: 'Woof!' 
}; 
dog.speak = cat.speak; 

dog.speak(); // Output: "Woof!" 

var speak = cat.speak; 
speak(); // Output: "undefined" 

speak = cat.speak.bind(dog); 
speak(); // Output: "Woof!" 

स्पष्टीकरण:

का मूल्य "इस" निर्भर करता है कि कार्यात्मक एन कहा जा रहा है। जब आप यह प्रदान करते हैं। चेतावनी आपके बटन के ऑनक्लिक हैंडलर के रूप में कुछ, यह बदलता है कि इसे कैसे कहा जाएगा क्योंकि आप उस फ़ंक्शन का प्रत्यक्ष संदर्भ प्रदान कर रहे हैं, और इसे आपके ऑब्जेक्ट इंस्टेंस के खिलाफ नहीं कहा जाएगा (सुनिश्चित नहीं है कि मैं वाक्यांश कर रहा हूं सही)।

.bind फ़ंक्शन एक नया फ़ंक्शन लौटाएगा जहां "यह" स्थायी रूप से उस मान को सेट किया गया है।

ईसीएमएस्क्रिप्ट 5 ने Function.prototype.bind पेश किया। कॉलिंग f.bind (someObject) एक ही शरीर और स्कोप के साथ एक नया फ़ंक्शन बनाता है, लेकिन जहां यह मूल फ़ंक्शन में होता है, नए फ़ंक्शन में यह स्थायी रूप से बाध्य के पहले तर्क के लिए बाध्य होता है, भले ही फ़ंक्शन कैसे है उपयोग किया जा रहा है।

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

यह इतना है कि .bind अपने संचालकों से प्रत्येक के लिए सिर्फ एक बार हो रहा है, बल्कि हर पर से प्रस्तुत करना आपके घटक के निर्माता में यह करने के लिए सबसे अच्छा है।