व्यावहारिक उदाहरण पर प्रतिक्रिया और Vue की तुलना

सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, का कहना है कि उसे काम पर Vue का उपयोग करना होगा और उसने इस रूपरेखा का अच्छी तरह से अध्ययन किया है। हालांकि, वह हमेशा यह जानने के लिए उत्सुक थे कि रिएक्ट ब्रह्मांड में चीजें अन्य दुनिया में कैसी हैं।

उन्होंने दस्तावेज़ीकरण पढ़ा, कुछ प्रशिक्षण वीडियो देखे, और हालांकि यह सब उन्हें बहुत उपयोगी लगा, वह वास्तव में यह समझना चाहते थे कि रिएक्ट और वेउ के बीच क्या अंतर था। उसके लिए, फ्रेमवर्क के बीच अंतर की खोज यह पता लगाने के लिए नहीं थी कि क्या वे दस्तावेज़ के वर्चुअल ऑब्जेक्ट मॉडल का समर्थन करते हैं, या वे वास्तव में पृष्ठों को कैसे प्रस्तुत करते हैं। वह चाहता था कि कोई उसे बताए जाने वाले कोड की विशेषताओं को बताए कि उसमें क्या चल रहा था। उन्होंने ऐसे ही मतभेदों की खोज के लिए समर्पित एक लेख को खोजने की उम्मीद की, जिसमें लिखा था कि कोई व्यक्ति जो केवल Vue या React (या वेब विकास में पूरी तरह से नया व्यक्ति) जानता है, इन रूपरेखाओं के बीच के अंतरों को बेहतर ढंग से समझ सकता है।



हालाँकि, उन्हें ऐसा कोई लेख नहीं मिला। इस तथ्य ने उन्हें यह समझने के लिए प्रेरित किया कि उन्हें खुद इस तरह के एक लेख को लेना था और जिस तरह से प्रतिक्रिया और प्रतिक्रिया के बीच अंतर और अंतर को समझना था, उसी तरह से लिखना था। तथ्य की बात के रूप में, यहाँ इन दो रूपरेखाओं की तुलना में उनके प्रयोग का वर्णन है।

सामान्य प्रावधान

Vue या प्रतिक्रिया?

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

अब मैं यहाँ प्रश्न में अनुप्रयोगों की उपस्थिति को देखने का प्रस्ताव करता हूं।


Vue और React द्वारा बनाए गए एप्लिकेशन

यहाँ इन अनुप्रयोगों के लिए कोड के साथ रिपॉजिटरी हैं: Vue ToDo , React ToDo ।

दोनों समान सीएसएस कोड का उपयोग वहां और वहां किया जाता है, एकमात्र अंतर वह है जहां बिल्कुल संबंधित फाइलें स्थित हैं। इसे देखते हुए, हम परियोजनाओं की संरचना पर एक नज़र डालते हैं।


Vue और React का उपयोग करके प्रोजेक्ट संरचना

जैसा कि आप देख सकते हैं, इन दो परियोजनाओं की संरचना लगभग समान है। एकमात्र प्रमुख अंतर यह है कि रिएक्ट एप्लिकेशन में तीन सीएसएस फाइलें हैं, जबकि Vue एप्लिकेशन में उनके पास बिल्कुल नहीं है। इसका कारण यह है, क्योंकि create-react-app का उपयोग create-react-app , React घटक सीएसएस फ़ाइलों के साथ सुसज्जित होते हैं, और Vue CLI एक अलग दृष्टिकोण लेता है जब शैलियों को एक विशिष्ट घटक फ़ाइल के अंदर घोषित किया जाता है।

नतीजतन, एक और दूसरे दोनों दृष्टिकोण हमें एक ही लक्ष्य को प्राप्त करने की अनुमति देते हैं, जबकि, यदि वांछित है, तो कुछ भी हमें वीयू या रिएक्ट से अलग शैली के आयोजन से रोकता है। वास्तव में, यह सब उस व्यक्ति की व्यक्तिगत प्राथमिकताओं में आता है जो वेब प्रोजेक्ट बनाता है। उदाहरण के लिए, डेवलपर समुदायों में सीएसएस संरचना के विषय पर लगातार चर्चा की जा रही है। अब हम सिर्फ मानक CSS दृष्टिकोणों का अनुसरण करते हैं, जो प्रश्न में रूपरेखाओं के CLI में दिए गए हैं।

हालांकि, इससे पहले कि हम आगे बढ़ते हैं, आइए एक नज़र डालें कि एक विशिष्ट Vue और React घटक कैसा दिखता है।

यहाँ Vue घटक कोड है (हमारी परियोजना में, यह ToDoItem.vue फ़ाइल में है)।

 <template>   <div class="ToDoItem">       <p class="ToDoItem-Text">{{todo.text}}</p>       <div class="ToDoItem-Delete"            @click="deleteItem(todo)">-       </div>   </div> </template> <script>   export default {       name: "to-do-item",       props: ['todo'],       methods: {           deleteItem(todo) {               this.$emit('delete', todo)           }       }   } </script> <style>   .ToDoItem {       display: flex;       justify-content: center;       align-items: center;   }   .ToDoItem-Text {       width: 90%;       background-color: white;       border: 1px solid lightgrey;       box-shadow: 1px 1px 1px lightgrey;       padding: 12px;       margin-right: 10px;   }   .ToDoItem-Delete {       width: 20px;       padding: 5px;       height: 20px;       cursor: pointer;       background: #ff7373;       border-radius: 10px;       box-shadow: 1px 1px 1px #c70202;       color: white;       font-size: 18px;       margin-right: 5px;   }   .ToDoItem-Delete:hover {       box-shadow: none;       margin-top: 1px;       margin-left: 1px;   } </style> 

यहाँ प्रतिक्रिया घटक ( ToDoItem.js फ़ाइल) के लिए कोड है।

 import React, {Component} from 'react'; import './ToDoItem.css'; class ToDoItem extends Component {   render() {       return (           <div className="ToDoItem">               <p className="ToDoItem-Text">{this.props.item}</p>               <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div>           </div>       );   } } export default ToDoItem; 

अब विवरण में गोता लगाने का समय है।

डेटा संशोधन कैसे किया जाता है?

डेटा बदलने को "डेटा म्यूटेशन" भी कहा जाता है। हम उस डेटा में किए गए परिवर्तनों के बारे में बात कर रहे हैं जो हमारे एप्लिकेशन स्टोर करते हैं। इसलिए, यदि हमें "जॉन" से "मार्क" के लिए एक निश्चित व्यक्ति का नाम बदलने की आवश्यकता है, तो हम "डेटा म्यूटेशन" के बारे में बात कर रहे हैं। यह डेटा परिवर्तन के दृष्टिकोण में है कि प्रतिक्रिया और Vue के बीच महत्वपूर्ण अंतर है। अर्थात्, Vue एक data ऑब्जेक्ट बनाता है जिसमें डेटा स्थित है, और जिसकी सामग्री को स्वतंत्र रूप से बदला जा सकता है। रिएक्ट एक state ऑब्जेक्ट बनाता है जिसमें एप्लिकेशन की स्थिति संग्रहीत होती है, और जब इसके साथ काम करते हैं, तो डेटा को बदलने के लिए कुछ अतिरिक्त प्रयास की आवश्यकता होती है। हालांकि, रिएक्ट में सब कुछ इस तरह से एक कारण के लिए व्यवस्थित किया गया है, हम इसके बारे में नीचे बात करेंगे, और एक शुरुआत के लिए हम उपर्युक्त वस्तुओं पर विचार करेंगे।

यह वेव द्वारा उपयोग की जाने वाली data ऑब्जेक्ट जैसा दिखता है।

 data() {     return {         list: [             {               todo: 'clean the house'             },             {               todo: 'buy milk'             }         ],     } }, 

यहाँ प्रतिक्रिया में प्रयुक्त वस्तु क्या है:

 constructor(props) {       super(props);       this.state = {           list: [               {                   'todo': 'clean the house'               },               {                   'todo': 'buy milk'               }           ],       };   }; 

जैसा कि आप देख सकते हैं, दोनों ही मामलों में हम एक ही डेटा का वर्णन करते हैं, वे बस अलग तरह से डिज़ाइन किए गए हैं। नतीजतन, हम कह सकते हैं कि Vue और React में घटकों को प्रारंभिक डेटा का स्थानांतरण बहुत, बहुत समान दिखता है। लेकिन, जैसा कि पहले ही उल्लेख किया गया है, इन रूपरेखाओं में मौजूदा डेटा को बदलने के दृष्टिकोण अलग-अलग हैं।

मान लीजिए हमारे पास name: 'Sunil' तरह एक डेटा तत्व है name: 'Sunil' । फिर मैंने name संपत्ति को अपना name सौंपा।

Vue में, आप इस डेटा का उपयोग कर सकते हैं। और यहां बताया गया है कि उन्हें कैसे बदलना है: this.name = 'John' । मुझे नहीं पता कि मेरा नाम वास्तव में बदलने पर मुझे कैसा लगेगा, लेकिन वीयू में यह उसी तरह काम करता है।

प्रतिक्रिया में, आप इस this.state.name निर्माण का उपयोग करके समान डेटा तक पहुंच सकते हैं। लेकिन इस तरह से कुछ लिखकर उन्हें बदलना this.state.name = 'John' संभव नहीं है, क्योंकि रिएक्ट में प्रतिबंध हैं जो ऐसे डेटा परिवर्तनों को रोकते हैं। इसलिए, प्रतिक्रिया में, आपको कुछ इस तरह का उपयोग करना होगा this.setState({name: 'John'}) ।

इस तरह के ऑपरेशन का परिणाम वही है जो वी में एक सरल ऑपरेशन करने के बाद प्राप्त किया जाता है। आपको React में अधिक कोड लिखना होगा, लेकिन Vue में setState फ़ंक्शन के एक विशेष संस्करण की तरह कुछ है, जिसे जब कहा जाता है, तो लगता है, एक साधारण डेटा परिवर्तन। इसलिए, संक्षेप में, प्रतिक्रिया के लिए डेटा के विवरण के साथ setState के उपयोग की आवश्यकता होती है जिसे बदलने की आवश्यकता होती है, और Vue इस धारणा पर काम करता है कि डेवलपर data ऑब्जेक्ट के अंदर डेटा को बदलकर कुछ इसी तरह का उपयोग करना चाहता है।

अब खुद से पूछते हैं कि रिएक्ट इतना setState क्यों setState और setState फ़ंक्शन की आवश्यकता क्यों है। आप रेवंत कुमार से इन सवालों के जवाब पा सकते हैं: “ऐसा इसलिए है क्योंकि रिएक्ट राज्य में एक बदलाव पर, कुछ जीवनचक्र के हुक, जैसे कि componentWillReceiveProps shouldComponentUpdate , shouldComponentUpdate , componentWillUpdate , render , componentDidUpdate पुन: निष्पादित करने का प्रयास करता है। यह पता चलता है कि जब आप setState फ़ंक्शन को कॉल करते हैं, तो स्थिति बदल setState है। यदि आप सीधे राज्य को बदलने के लिए थे, तो रिएक्ट को परिवर्तनों को ट्रैक करने के लिए बहुत अधिक काम करना होगा, यह निर्धारित करने के लिए कि जीवन चक्र हुक को चलाने के लिए, और इसी तरह। परिणामस्वरूप, जीवन को setState बनाने के लिए रिएक्ट setState का उपयोग करता setState । ”

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

टू-डू सूची में नई आइटम जोड़ें

▍React

यहाँ इसे रिएक्ट में कैसे करें।

 createNewToDoItem = () => {   this.setState( ({ list, todo }) => ({     list: [         ...list,       {         todo       }     ],     todo: ''   }) ); }; 

यहां डेटा input ( input ) के लिए उपयोग किया जाने वाला क्षेत्र, विशेषता value । इस विशेषता को आपस में जुड़े हुए फ़ंक्शंस की एक जोड़ी के माध्यम से स्वचालित रूप से अपडेट किया जाता है, जो दो-तरफ़ा डेटा बाइंडिंग कहलाता है (यदि आपने इसके बारे में पहले नहीं सुना है - थोड़ा इंतजार करें, हम Vue एप्लिकेशन में तत्वों को जोड़ने के अनुभाग में इस बारे में बात करेंगे)। हम इस तरह के दो-तरफ़ा संचार बनाते हैं, जो input फ़ील्ड से जुड़ी एक अतिरिक्त onChange ईवेंट onChange की उपस्थिति के कारण होता है। आइए इस क्षेत्र के कोड पर एक नज़र डालें ताकि आप समझ सकें कि यहाँ क्या हो रहा है।

 <input type="text"      value={this.state.todo}      onChange={this.handleInput}/> 

input फ़ील्ड के मान में परिवर्तन होने पर handleInput फ़ंक्शन handleInput कहा जाता है। यह todo तत्व को अद्यतन करने की ओर जाता है, जो कि input क्षेत्र में मौजूद मान पर सेट करके, state वस्तु के अंदर होता है। यह वही है जो handleInput फ़ंक्शन दिखता है।

 handleInput = e => { this.setState({   todo: e.target.value }); }; 

अब, जब उपयोगकर्ता सूची में एक नया रिकॉर्ड जोड़ने के लिए एप्लिकेशन पेज पर + बटन पर क्लिक करता है, तो createNewToDoItem फ़ंक्शन इस this.setState विधि को कॉल करता है और इसे फ़ंक्शन को पास करता है। यह फ़ंक्शन दो पैरामीटर लेता है। पहला state ऑब्जेक्ट से पूरी list सरणी है, और दूसरा handleInput फ़ंक्शन द्वारा अद्यतन किया गया todo तत्व है। फ़ंक्शन तब एक नई ऑब्जेक्ट देता है जिसमें पुरानी list सरणी होती है, और इस सरणी के अंत में एक नया todo तत्व जोड़ता है। सूची के साथ काम spread ऑपरेटर का उपयोग करके आयोजित किया जाता है (यदि आप इसे पहले नहीं मिले, तो ध्यान रखें कि यह ES6 की नई विशेषताओं में से एक है और इसके बारे में विवरण देखें)।

अंत में, एक खाली स्ट्रिंग को todo में लिखा जाता है, जो स्वचालित रूप से input क्षेत्र में value को अपडेट करता है।

▍Vue

Vue में टू-डू सूची में एक नया आइटम जोड़ने के लिए निम्न निर्माण का उपयोग किया जाता है।

 createNewToDoItem() {   this.list.push(       {           'todo': this.todo       }   );   this.todo = ''; } 

Vue में, इनपुट फ़ील्ड में एक v-model निर्देश है। यह आपको दो-तरफ़ा डेटा बाइंडिंग को व्यवस्थित करने की अनुमति देता है। इस क्षेत्र के लिए कोड पर एक नज़र डालें और यहां क्या चल रहा है, इसके बारे में बात करें।

 <input type="text" v-model="todo"/> 

v-model निर्देश एक फ़ील्ड को एक कुंजी से बांधता है जो डेटा ऑब्जेक्ट में मौजूद होता है जिसे toDoItem कहा जाता है। जब पृष्ठ लोड होता है, तो एक खाली लाइन toDoItem में लिखी toDoItem , यह todo: '' की तरह दिखता है todo: '' ।

यदि पहले से ही कुछ डेटा है, todo: 'add some text here' तरह कुछ todo: 'add some text here' , तो वही पाठ इनपुट फ़ील्ड में मिलेगा, वह है - 'add some text here' । किसी भी स्थिति में, यदि हम एक रिक्त स्ट्रिंग के साथ उदाहरण पर लौटते हैं, तो हम जिस क्षेत्र में प्रवेश करते हैं वह गिर जाएगा, डेटा बाइंडिंग के कारण, todo प्रॉपर्टी में। यह एक दो-तरफ़ा डेटा बाइंडिंग है, अर्थात्, फ़ील्ड में नए डेटा को दर्ज करने से data ऑब्जेक्ट में इस डेटा की रिकॉर्डिंग होती है, और ऑब्जेक्ट में डेटा को अपडेट करने से फ़ील्ड में इस डेटा की उपस्थिति होती है।

अब createNewToDoItem() फ़ंक्शन को याद रखें, जिसके बारे में हमने ऊपर बात की थी। जैसा कि आप देख सकते हैं, हम list सरणी में todo की सामग्री डालते हैं, और फिर todo लिए एक खाली स्ट्रिंग लिखते हैं।

किसी सूची से आइटम निकालना

▍React

प्रतिक्रिया में, यह ऑपरेशन इस तरह से किया जाता है।

 deleteItem = indexToDelete => {   this.setState(({ list }) => ({     list: list.filter((toDo, index) => index !== indexToDelete)   })); }; 

जबकि deleteItem फ़ंक्शन ToDo.js फ़ाइल में है, आप इसे ToDoItem.js समस्याओं के बिना एक्सेस कर सकते हैं, पहले इस फ़ंक्शन को एक संपत्ति के रूप में <ToDoItem/> । यहाँ यह कैसा दिखता है:

 <ToDoItem deleteItem={this.deleteItem.bind(this, key)}/> 

यहां हम पहले फ़ंक्शन को पास करते हैं, जो इसे बाल घटकों को उपलब्ध कराता है। इसके अलावा, हम इसे बांधते हैं और key पैरामीटर पास करते हैं। इस पैरामीटर का उपयोग फ़ंक्शन द्वारा ToDoItem तत्व को अन्य तत्वों से हटाने के लिए अलग करने के लिए किया जाता है। फिर, ToDoItem घटक के अंदर, हम निम्नलिखित करते हैं।

 <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div> 

मूल घटक में स्थित फ़ंक्शन तक पहुंचने के लिए सभी आवश्यक कार्य करने की आवश्यकता है। this.props.deleteItem निर्माण का उपयोग करना है।

▍Vue

Vue में किसी सूची आइटम को हटाना इस तरह किया जाता है।

 onDeleteItem(todo){ this.list = this.list.filter(item => item !== todo); } 

Vue को रिएक्ट में उपयोग किए गए तत्वों की तुलना में तत्वों को हटाने के लिए थोड़ा अलग दृष्टिकोण की आवश्यकता होती है। अर्थात्, तीन कदम उठाए जाने हैं।

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

 <div class="ToDoItem-Delete" @click="deleteItem(todo)">-</div> 

फिर आपको बच्चे के घटक (इस मामले में, ToDoItem.vue ) में एक विधि के रूप में ToDoItem.vue फ़ंक्शन बनाने की आवश्यकता है, जो इस तरह दिखता है।

 deleteItem(todo) {   this.$emit('delete', todo) } 

इसके अलावा, आप देख सकते हैं कि हम ToDoItem.vue अंदर ToDoItem.vue जोड़ रहे हैं।

 <ToDoItem v-for="todo in list"         :todo="todo"         @delete="onDeleteItem" // <-- this :)         :key="todo.id" /> 

इसे ही कस्टम इवेंट श्रोता कहा जाता है। यह delete लाइन के साथ कॉल का emit करने के लिए प्रतिक्रिया करता है। यदि यह एक समान घटना को पकड़ता है, तो यह onDeleteItem फ़ंक्शन को कॉल करता है। यह ToDo.vue अंदर स्थित है, और ToDoItem.vue में नहीं है। यह फ़ंक्शन, जैसा कि ऊपर उल्लेख किया गया है, बस उस पर क्लिक किए गए तत्व को हटाने के लिए data ऑब्जेक्ट में स्थित todo सरणी को फ़िल्टर करता है।

इसके अलावा, यह ध्यान देने योग्य है कि Vue का उपयोग करने वाले उदाहरण में, कोई केवल @click अंदर emit फ़ंक्शन से संबंधित कोड लिख सकता @click । ऐसा लग सकता है।

 <div class="ToDoItem-Delete" @click="$emit('delete', todo)">-</div> 

इससे सूची आइटम को तीन से दो करने के लिए आवश्यक चरणों की संख्या कम हो जाएगी। कैसे आगे बढ़ें डेवलपर प्राथमिकता का विषय है।

इस खंड को संक्षेप में कहने के लिए, हम कह सकते हैं कि प्रतिक्रिया में, मूल घटकों में वर्णित कार्यों तक पहुंच का आयोजन this.props माध्यम से किया जाता है। this.props (यह देखते हुए कि props को बाल घटकों को पास किया जाता है, जो एक मानक तकनीक है जो शाब्दिक रूप से हर जगह पाया जा सकता है)। Vue में, बच्चे के घटकों को emit फ़ंक्शन का उपयोग करके घटनाओं को ट्रिगर करना चाहिए, और इन घटनाओं को पहले से ही मूल घटक द्वारा नियंत्रित किया जाता है।

इवेंट श्रोताओं के साथ काम करें

▍React

रिएक्ट में, कुछ साधारण के लिए इवेंट श्रोता, एक क्लिक इवेंट की तरह, काफी सरल होते हैं। यहां एक बटन के लिए click इवेंट हैंडलर बनाने का एक उदाहरण है जो एक नया टू-डू आइटम बनाता है।

 <div className="ToDo-Add" onClick={this.createNewToDoItem}>+</div> 

सब कुछ काफी सरल रूप से यहां व्यवस्थित किया गया है, यह शुद्ध जावास्क्रिप्ट का उपयोग करके ऐसी घटनाओं को संसाधित करने के समान है।

यह ध्यान दिया जाना चाहिए कि यहां, कीस्ट्रोक्स दबाने के लिए ईवेंट श्रोताओं को सेट करना, उदाहरण के लिए, Enter , वीयू की तुलना में थोड़ा अधिक समय लगता है। यहां आपको निम्न प्रकार से onKeyPress इवेंट को onKeyPress आवश्यकता है। यहाँ इनपुट फ़ील्ड के लिए कोड है।

 <input type="text" onKeyPress={this.handleKeyPress}/> 

जब यह Enter पर createNewToDoItem को पहचानता है, createNewToDoItem फंक्शन handleKeyPress फ़ंक्शन को कॉल करता है। ऐसा दिखता है।

 handleKeyPress = (e) => { if (e.key === 'Enter') { this.createNewToDoItem(); } }; 

▍Vue

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

उदाहरण के लिए, एक क्लिक ईवेंट श्रोता जोड़ने के लिए, आप निम्न कोड का उपयोग कर सकते हैं।

 <div class="ToDo-Add" @click="createNewToDoItem()">+</div> 

कृपया ध्यान दें कि @click v-on:click लिए छोटा है v-on:click । Vue इवेंट श्रोताओं को बहुत सूक्ष्मता से नियंत्रित किया जाता है। उदाहरण के लिए, श्रोता के लिए .once कंस्ट्रक्शन .once करने से श्रोता केवल एक बार फायर करेगा।

ऐसे कई संक्षिप्त रूप हैं जो श्रोताओं के लेखन को सरल बनाते हैं जो कीबोर्ड पर कीस्ट्रोक्स पर प्रतिक्रिया करते हैं। प्रतिक्रिया में, जैसा कि हमने कहा है, यह Vue की तुलना में अधिक समय लेता है। यहाँ यह बहुत सरलता से किया जाता है।

 <input type="text" v-on:keyup.enter="createNewToDoItem"/> 

बाल घटकों को डेटा पास करना

▍React

प्रतिक्रिया में, गुणों को बाल घटक के पास भेजा जाता है जब इसे बनाया जाता है। उदाहरण के लिए, इस तरह:

 <ToDoItem key={key} item={todo} /> 

यहां आप ToDoItem घटक को पारित दो गुण देख सकते हैं। अब से, उन्हें this.props घटक के माध्यम से बाल घटक में पहुँचा जा this.props ।

उदाहरण के लिए, item.todo प्रॉपर्टी तक पहुंचने के लिए, बस item.todo निर्माण का उपयोग करें।

▍Vue

Vue में, गुणों को बाल घटकों को भी पास किया जाता है जब वे बनाए जाते हैं।

 <ToDoItem v-for="todo in list"           :todo="todo"           :key="todo.id"           @delete="onDeleteItem" /> 

उसके बाद, वे बच्चे के घटक के props सरणी में पारित हो जाते हैं, उदाहरण के लिए, props: [ 'todo' ] का उपयोग करते हुए props: [ 'todo' ] निर्माण। आप इन गुणों को नाम से बाल घटकों में एक्सेस कर सकते हैं, हमारे मामले में यह 'todo' नाम है।

मूल घटक को डेटा पास करना

▍React

प्रतिक्रिया में, फ़ंक्शन को पहली बार चाइल्ड घटक को एक संपत्ति के रूप में पास किया जाता है जहां चाइल्ड घटक कहा जाता है। फिर इसे इस फ़ंक्शन को कॉल करने की योजना बनाई गई है, उदाहरण के लिए, इसे onClick हैंडलर के रूप में जोड़कर, या इसे कॉल करके। this.props.whateverTheFunctionIsCalled । यह मूल घटक में स्थित फ़ंक्शन को कॉल करता है। यह प्रक्रिया सूची से आइटम हटाने पर अनुभाग में वर्णित है।

▍Vue

एक बच्चे के घटक में Vue का उपयोग करते समय, यह एक फ़ंक्शन लिखने के लिए पर्याप्त है जो डेटा को मूल फ़ंक्शन से गुजरता है। एक फ़ंक्शन मूल घटक में लिखा जाता है जो मूल्य हस्तांतरण घटनाओं के लिए सुनता है। जब एक समान घटना होती है, तो ऐसा फ़ंक्शन कहा जाता है। प्रतिक्रिया के साथ, इस प्रक्रिया का विवरण सूची से आइटम हटाने पर अनुभाग में पाया जा सकता है।

परिणाम

हमने Vue और React- आधारित अनुप्रयोगों में डेटा को जोड़ने, हटाने और संशोधित करने, डेटा को कैसे स्थानांतरित करने, गुणों के रूप में, माता-पिता के घटकों से बच्चों तक और बाल घटकों से माता-पिता तक डेटा भेजने के बारे में बात की। हम मानते हैं कि समानताओं और मतभेदों के उदाहरणों का विश्लेषण करने के बाद, Vue और React दिखाई देते हैं, जैसा कि वे कहते हैं, नग्न आंखों के लिए।

बेशक, रिएक्ट और वीयू के बीच कई अन्य छोटे अंतर हैं, लेकिन मुझे उम्मीद है कि हमने यहां जो कवर किया है, वह यह समझने के लिए एक अच्छे आधार के रूप में काम करेगा कि ये फ्रेमवर्क कैसे काम करते हैं। नए प्रोजेक्ट के लिए सही प्लेटफॉर्म चुनते समय फ्रेमवर्क का अक्सर विश्लेषण किया जाता है। हमें उम्मीद है कि यह सामग्री इस तरह का चुनाव करने में मदद करेगी।

प्रिय पाठकों! आपकी राय में, रिएक्ट और वीयू के बीच क्या अंतर हैं, सबसे महत्वपूर्ण हैं जो किसी विशेष रूपरेखा की पसंद को प्रभावित करते हैं, उदाहरण के लिए, एक निश्चित परियोजना के लिए आधार के रूप में?