मैं इन अवधारणाओं पर थोड़ा फजी हूं, अगर मैं एक ही ToDo ऐप को पूरी तरह से AngularJS और ReactJS में बनाता हूं --- तो क्या बनाता है React ToDo का इस्तेमाल एक तरह से डेटा बाइंडिंग बनाम AngularJS के टू-वे डेटा बाइंडिंग के लिए होता है?
मैं समझता हूं कि रिएक्ट की तरह काम करता है
रेंडर (डेटा) ---> यूआई।
यह कोणीय से कैसे अलग है?
जवाबों:
जब कोणीय दो डेटाबाइंडिंग सेट करता है तो दो "वॉचर्स" मौजूद होते हैं (यह एक सरलीकरण है)
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />इनपुट के साथ शुरू होगा test, फिर another1000ms में अपडेट होगा । $scope.nameनियंत्रक कोड से या इनपुट को बदलकर कोई भी परिवर्तन , कंसोल लॉग में 4000ms बाद में परिलक्षित होगा। परिवर्तन स्वचालित रूप <input />से $scope.nameसंपत्ति में परिलक्षित होते हैं, क्योंकि ng-modelसेट इनपुट देखता है और $scopeपरिवर्तनों को सूचित करता है। कोड से परिवर्तन और HTML से परिवर्तन दो तरह से बाध्यकारी हैं । ( इस फिडेल को देखें )
प्रतिक्रिया में HTML को घटक बदलने की अनुमति देने के लिए कोई तंत्र नहीं है। HTML केवल उन घटनाओं को बढ़ा सकता है जो घटक प्रतिक्रिया करता है। विशिष्ट उदाहरण का उपयोग करके है onChange।
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}का मान पूरी तरह से फ़ंक्शन द्वारा <input />नियंत्रित किया जाता है। इस मान को अपडेट करने का एकमात्र तरीका घटक से ही है, जो एक घटना को संलग्न करके किया जाता है जो प्रतिक्रिया घटक विधि के साथ सेट होता है । घटकों राज्य के लिए सीधी पहुँच नहीं है, और इसलिए यह परिवर्तन नहीं कर सकते। यह वन-वे बाइंडिंग है । (इस कोडपेन को देखें )renderonChange<input />this.state.valuesetState<input />
onChangeश्रोता को सेट करना होगा और चलाना होगा handleChange। लेकिन क्योंकि प्रतिक्रिया का एक ही रास्ता है डेटा के वहाँ से, बंधन, डेटा → यूआई अद्यतन करता है अपने आप ही हो।
मैंने थोड़ी ड्राइंग बनाई। मुझे उम्मीद है कि यह काफी स्पष्ट है। मुझे पता है अगर यह नहीं है!
दो-तरफ़ा डेटा बाइंडिंग किसी गुण का मान लेने और उसे दृश्य पर प्रदर्शित करने की क्षमता प्रदान करता है, जबकि मॉडल में मूल्य को स्वचालित रूप से अपडेट करने के लिए एक इनपुट भी होता है। उदाहरण के लिए, आप संपत्ति "कार्य" को दृश्य पर दिखा सकते हैं और उसी संपत्ति पर टेक्स्टबॉक्स मान को बांध सकते हैं। इसलिए, यदि उपयोगकर्ता टेक्स्टबॉक्स के मूल्य को अपडेट करता है, तो दृश्य स्वचालित रूप से अपडेट हो जाएगा और नियंत्रक में इस पैरामीटर का मूल्य भी अपडेट किया जाएगा। इसके विपरीत, एक तरह से बाइंडिंग केवल मॉडल के मूल्य को देखने के लिए बाध्य करता है और यह निर्धारित करने के लिए एक अतिरिक्त वॉचर नहीं है कि क्या उपयोगकर्ता द्वारा दृश्य में मूल्य बदल दिया गया है।
React.js के संबंध में, यह वास्तव में दो तरह से डेटा बाइंडिंग के लिए डिज़ाइन नहीं किया गया था, हालांकि, आप अभी भी कुछ अतिरिक्त तर्क जोड़कर दो-तरफ़ा बाइंडिंग को लागू कर सकते हैं, उदाहरण के लिए इस लिंक को देखें । Angular.JS में टू-वे बाइंडिंग प्रथम श्रेणी का नागरिक है, इसलिए इस अतिरिक्त तर्क को जोड़ने की कोई आवश्यकता नहीं है।