पुस्तक रिएक्ट फास्ट। React, JSX, Redux और GraphQL में वेब अनुप्रयोग »

हाय, हब्रोज़ितेली! मूल संस्करण 2017 के पतन में जारी किया गया था, लेकिन अभी भी रिएक्ट की खोज के लिए सबसे अच्छी पुस्तक माना जाता है। लेखक जीथब भंडार में पुस्तक के लिए कोड को लगातार अपडेट और संशोधित कर रहा है।

हम एक पोस्ट में सुझाव देते हैं कि "राज्यों की प्रतिक्रिया की प्रकृति में उनकी भूमिका" और उनकी भूमिका से परिचित हों।

यदि आपको इस पुस्तक में केवल एक अध्याय पढ़ना है, तो आपको इसे चुनना चाहिए! राज्यों के बिना, रिएक्ट घटक उन्नत स्थिर पैटर्न से ज्यादा कुछ नहीं हैं। मुझे आशा है कि आप मेरा उत्साह साझा करेंगे क्योंकि इस अध्याय में अवधारणाओं को समझने से आप बहुत अधिक दिलचस्प अनुप्रयोगों का निर्माण कर सकेंगे।


कल्पना कीजिए कि आप स्वत: पूर्ण (छवि 4.1) के साथ एक इनपुट फ़ील्ड बना रहे हैं। डेटा दर्ज करते समय, फ़ील्ड को सर्वर को एक वेब पेज पर आउटपुट प्रदर्शित करने के लिए उपयुक्त विकल्पों के बारे में जानकारी प्राप्त करने के लिए अनुरोध जारी करना चाहिए। आपने अब तक गुणों के साथ काम किया है, और आप जानते हैं कि गुणों को बदलने से आप अलग-अलग विचार प्राप्त कर सकते हैं। हालांकि, संपत्तियों को वर्तमान घटक के संदर्भ में नहीं बदला जा सकता है, क्योंकि घटक बनने पर वे पारित हो जाते हैं।

दूसरे शब्दों में, गुण वर्तमान घटक में अपरिवर्तनीय हैं, जिसका अर्थ है कि आप इस घटक में गुणों को तब तक नहीं बदल सकते जब तक आप घटक को फिर से नहीं बनाते हैं और माता-पिता (छवि। 4.2) से नए मूल्यों को स्थानांतरित करते हैं। लेकिन सर्वर से प्राप्त जानकारी को कहीं संग्रहीत करने की आवश्यकता होती है, और फिर विकल्पों की एक नई सूची को दृश्य में प्रदर्शित किया जाना चाहिए। यदि गुण नहीं बदले जा सकते हैं तो दृश्य को कैसे अपडेट किया जाए?

एक संभावित समाधान यह है कि जब आप सर्वर से नई प्रतिक्रिया प्राप्त करते हैं, तो हर बार नए गुणों के साथ एक तत्व प्रदान करें। लेकिन फिर आपको तर्क को घटक के बाहर रखना होगा - और घटक को आत्मनिर्भर होना बंद हो जाता है। जाहिर है, अगर संपत्ति के मूल्यों को नहीं बदला जा सकता है, और स्वत: पूर्णता को आत्मनिर्भर होना चाहिए, तो गुणों का उपयोग करना असंभव है। फिर सवाल उठता है: घटक (createElement () या JSX <NAME />) को फिर से बनाए बिना घटनाओं के जवाब में विचारों को कैसे अपडेट किया जाए? यह समस्या है जो राज्यों को हल करती है।


सर्वर से प्रतिक्रिया तैयार होने के बाद, कॉलबैक कोड घटक की स्थिति को तदनुसार बदल देगा। आपको यह कोड खुद लिखना होगा। हालाँकि, राज्य के अद्यतन होने के बाद, प्रतिक्रिया स्वतः ही आपके लिए दृश्य को अपडेट कर देगी (केवल उन स्थानों पर जहां इसे अपडेट किया जाना चाहिए, यानी जहां राज्य डेटा का उपयोग किया जाता है)।

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

प्रतिक्रिया घटक की स्थिति क्या है?

प्रतिक्रिया स्थिति एक उत्परिवर्तनीय घटक डेटा भंडारण है - उपयोगकर्ता इंटरफ़ेस और तर्क के स्टैंड-अलोन फ़ंक्शन-उन्मुख ब्लॉक। "परिवर्तनशीलता" का अर्थ है कि राज्य के मूल्य बदल सकते हैं। दृश्य में राज्य का उपयोग करना (रेंडर करना) और बाद में मूल्यों को बदलना, आप दृश्य की उपस्थिति को प्रभावित कर सकते हैं।

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

राज्यों के साथ काम करते समय, आप उन्हें नाम से एक्सेस करते हैं। नाम इस का एक गुण है (यानी, ऑब्जेक्ट कुंजी या ऑब्जेक्ट प्रॉपर्टी - घटक का गुण नहीं)। इस ऑब्जेक्ट का उदाहरण, उदाहरण के लिए this.state.autocompleMatches या this.state.inputFieldValue है।

राज्य डेटा का उपयोग अक्सर विचारों के प्रतिपादन को बढ़ाने के लिए एक दृश्य में गतिशील जानकारी प्रदर्शित करने के लिए किया जाता है। स्वत: पूर्ण फ़ील्ड के पुराने उदाहरण पर वापस लौटना: सर्वर पर XHR अनुरोध के जवाब में स्थिति बदल जाती है, जो बदले में, डेटा को फ़ील्ड में दर्ज करके शुरू की जाती है। प्रतिक्रिया यह सुनिश्चित करती है कि जब दृश्य में परिवर्तन किया जाता है तो दृश्य अपडेट किए जाते हैं। वास्तव में, जब कोई स्थिति बदलती है, तो केवल प्रतिनिधित्व के संबंधित हिस्से बदलते हैं (व्यक्तिगत तत्वों और यहां तक ​​कि एक व्यक्तिगत तत्व के गुण मान)।

DOM में बाकी सब कुछ अपरिवर्तित रहता है। यह वर्चुअल DOM मॉडल (खंड 1.1.1 देखें) के लिए धन्यवाद संभव है, जो रिएक्ट सुलह प्रक्रिया के दौरान डेल्टा (परिवर्तनों की समग्रता) को निर्धारित करने के लिए उपयोग करता है। यह तथ्य आपको एक घोषणात्मक शैली में कोड लिखने की अनुमति देता है। रिएक्ट आपके लिए सभी रूटीन करता है। प्रस्तुति को बदलने के मुख्य चरण 5 अध्याय में चर्चा की गई है।

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

// :   ! let inputValue = 'Texas' class Autocomplete extends React.Component { updateValues() ← {      ( ) this.props.inputValue = 'California' inputValue = 'California' this.inputValue = 'California' } render() { return ( <div> {this.props.inputValue} {inputValue} {this.inputValue} </div> ) } } 

अब देखते हैं कि रिएक्ट घटकों के राज्यों के साथ कैसे काम किया जाए।

राज्यों के साथ काम करें

राज्यों के साथ काम करने के लिए, आपको मूल्यों का उपयोग करने, उन्हें अपडेट करने और प्रारंभिक मान सेट करने में सक्षम होना चाहिए। आइए राज्यों को प्रतिक्रिया घटकों में संदर्भित करके शुरू करें।

राज्यों तक पहुंच

राज्य ऑब्जेक्ट घटक का एक गुण है, और आपको इसे इस लिंक के माध्यम से एक्सेस करना चाहिए, उदाहरण के लिए इस.state.name। जैसा कि आप याद करते हैं, चर को जेसीएक्स कोड में घुंघराले ब्रेसिज़ ({}) में एक्सेस और प्रदर्शित किया जा सकता है। इसी तरह, रेंडर () में, आप इस (किसी भी अन्य चर या गैर-मानक घटक की वर्ग विशेषता की तरह) रेंडर कर सकते हैं, उदाहरण के लिए {this.state.inputFieldValue}। यह सिंटैक्स इस .props.name में गुणों तक पहुँचने के लिए सिंटैक्स के समान है।

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

परियोजना में निम्नलिखित संरचना है:

 /clock index.html /jsx script.jsx clock.jsx /js script.js clock.js react.js react-dom.js 

मैं ट्रैकिंग झंडे (-w) और निर्देशिका (-d) के साथ बैबेल सीएलआई का उपयोग सभी जेएसएक्स स्रोत फ़ाइलों को घड़ी / जेएसएक्स से लक्ष्य घड़ी / जेएस फ़ोल्डर में संकलित करने और परिवर्तन का पता चलने पर पुन: स्थापित करने के लिए करता हूं। इसके अलावा, मैंने पैकेज में npm स्क्रिप्ट के रूप में कमांड को सहेजा है। पैरेंट फोल्डर ch04 की json फाइल को ch04 से npm रन बिल्ड-क्लॉक कमांड निष्पादित करने के लिए:

 "scripts": { "build-clock": "./node_modules/.bin/babel clock/jsx -d clock/js -w" }, 

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

लिस्टिंग 4.1। JSX राज्य प्रस्तुत करना

 class Clock extends React.Component { render() { return <div>{this.state.currentTime}</div> } } ReactDOM.render( <Clock />, document.getElementById('content') ) 

आपको एक त्रुटि संदेश मिलेगा: अनकैप्ड टाइपर्रर: नल की संपत्ति 'करंट टाइम' को नहीं पढ़ सकता है। आमतौर पर जावास्क्रिप्ट त्रुटि संदेशों में एक डूबते हुए व्यक्ति के लिए एक गिलास ठंडे पानी के समान लाभ होते हैं। यह अच्छा है कि कम से कम इस मामले में, जावास्क्रिप्ट एक सार्थक संदेश प्रदर्शित करता है।

संदेश इंगित करता है कि वर्तमान समय का मान अपरिभाषित है। गुणों के विपरीत, राज्य माता-पिता में सेट नहीं होते हैं। सेटस्टैट को रेंडर करने में () भी विफल हो जाता है, क्योंकि यह एक लूप बनाएगा (सेटस्टेट -> रेंडर -> सेटस्टैट ...) - और रिएक्ट एक त्रुटि की सूचना देगा।

प्रारंभिक अवस्था का असाइनमेंट

आपने पहले ही देखा है कि रेंडर () में स्टेट डेटा का उपयोग करने से पहले, आपको स्टेट को इनिशियलाइज़ करना होगा। प्रारंभिक स्थिति सेट करने के लिए, ES6 वर्ग React.Component के सिंटैक्स के साथ कंस्ट्रक्टर में इस का उपयोग करें। सुपर को कॉल करने के लिए याद रखें () गुणों के साथ; अन्यथा, पैरेंट (React.Component) में तर्क काम नहीं करेगा:

 class MyFancyComponent extends React.Component { constructor(props) { super(props) this.state = {...} } render() { ... } } 

प्रारंभिक स्थिति निर्दिष्ट करते समय, आप अन्य तर्क भी जोड़ सकते हैं - उदाहरण के लिए, नई तिथि () का उपयोग करके करंट टाइम का मान सेट करें। आप उपयोगकर्ता के वर्तमान स्थान के लिए सही तिथि / समय प्रारूप प्राप्त करने के लिए भी toLocaleString () का उपयोग कर सकते हैं, जैसा कि नीचे दिखाया गया है (ch04 / घड़ी)।

लिस्टिंग 4.2। घड़ी घटक निर्माता

 class Clock extends React.Component { constructor(props) { super(props) this.state = {currentTime: (new Date()).toLocaleString()} } ... } 

इस मूल्य का मान एक वस्तु होना चाहिए। हम ES6 से निर्माता () के विवरण में नहीं जाएंगे; परिशिष्ट D और ES6 सारांश को github.com/azat-co/cheatsheets/tree/master/6 पर देखें । लब्बोलुआब यह है कि अन्य ओओपी भाषाओं की तरह, एक रचनाकार (यानी कंस्ट्रक्टर ()) को तब बुलाया जाता है जब कक्षा का एक उदाहरण बनाया जाता है। कंस्ट्रक्टर विधि का नाम सिर्फ इतना होना चाहिए; ईएस 6 के नियमों में से एक पर विचार करें। इसके अलावा, कंस्ट्रक्टर () विधि बनाते समय, सुपर () कॉल को लगभग हमेशा इसमें शामिल किया जाना चाहिए, जिसके बिना मूल निर्माता को निष्पादित नहीं किया जाएगा। दूसरी ओर, यदि आप कंस्ट्रक्टर () विधि को परिभाषित नहीं करते हैं, तो सुपर () को कॉल डिफ़ॉल्ट रूप से माना जाएगा।

नाम टाइमटाइम वैकल्पिक है; इस स्थिति को पढ़ने और अपडेट करने के बाद आपको उसी नाम का उपयोग करना होगा।

राज्य ऑब्जेक्ट में नेस्टेड ऑब्जेक्ट या सरणियाँ हो सकती हैं। निम्नलिखित उदाहरण राज्य में पुस्तक विवरण की एक सरणी जोड़ता है:

 class Content extends React.Component { constructor(props) { super(props) this.state = { githubName: 'azat-co', books: [ 'pro express.js', 'practical node.js', 'rapid prototyping with js' ] } } render() { ... } } 

क्लास के आधार पर रिएक्ट एलिमेंट बनाते समय कंस्ट्रक्टर () विधि को केवल एक बार कहा जाता है। इस प्रकार, आप इस का उपयोग करके सीधे राज्य सेट कर सकते हैं। केवल एक बार - कंस्ट्रक्टर () विधि में। इस के साथ राज्य को सीधे सेट या अपडेट न करें। = = कहीं और, क्योंकि इससे अप्रत्याशित परिणाम हो सकते हैं।

तो आपको केवल प्रारंभिक मूल्य मिलता है, जो बहुत जल्दी अप्रचलित हो जाएगा - सिर्फ 1 सेकंड में। किसे ऐसी घड़ी चाहिए जो वर्तमान समय को न दिखाए? सौभाग्य से, वर्तमान स्थिति को अद्यतन करने के लिए एक तंत्र है।

स्थिति अद्यतन

इस। विधि (डेटा, कॉलबैक) वर्ग की विधि द्वारा राज्य को बदल दिया जाता है। जब इस विधि को कॉल किया जाता है, तो रिएक्ट वर्तमान राज्यों के साथ डेटा को जोड़ती है और कॉल रेंडर () करता है, जिसके बाद यह कॉलबैक कहता है।

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

यदि आप बस मान लेते हैं कि सेटस्टैट () को पूरा करने के लिए इंतजार किए बिना राज्य को अपडेट किया गया है, अर्थात, अतुल्यकालिक ऑपरेशन करते समय तुल्यकालिक रूप से काम करने के लिए, एक त्रुटि हो सकती है: कार्यक्रम राज्य के मूल्यों को अपडेट करने पर निर्भर करता है, लेकिन राज्य पुराना रहता है।
अब तक, हमने राज्य से समय प्रदान किया है। आप पहले से ही जानते हैं कि प्रारंभिक स्थिति कैसे सेट करें, लेकिन इसे हर दूसरे, सही अपडेट किया जाना चाहिए? ऐसा करने के लिए, ब्राउज़र टाइमर फ़ंक्शन सेट इन्टरवल () (http://mng.bz/P2d6) का उपयोग करें, जो राज्य को हर n मिलीसेकंड में अपडेट करेगा। सेटइंटरवाल () विधि लगभग सभी आधुनिक ब्राउज़रों में वैश्विक के रूप में लागू की गई है, जिसका अर्थ है कि इसका उपयोग बिना किसी अतिरिक्त लाइब्रेरी या उपसर्ग के किया जा सकता है। एक उदाहरण:

 setInterval(()=>{ console.log('Updating time...') this.setState({ currentTime: (new Date()).toLocaleString() }) }, 1000) 

उलटी गिनती शुरू करने के लिए, आपको setInterval () को केवल एक बार कॉल करना होगा। हम केवल इस उद्देश्य के लिए लॉन्चकॉक () विधि बनाते हैं; लॉन्चकॉक () निर्माणकर्ता में कहा जाएगा। घटक का अंतिम संस्करण लिस्टिंग 4.3 (ch04 / घड़ी / jsx / clock.jsx) में दिखाया गया है।


सेटस्टैट () विधि कहीं भी लॉन्च की जा सकती है, न कि केवल लॉन्चकॉक () विधि में (जिसे कंस्ट्रक्टर में कहा जाता है), उदाहरण के लिए। आमतौर पर, सेटस्टैट () विधि को एक घटना हैंडलर से या कॉलबैक के रूप में कहा जाता है जब डेटा प्राप्त होता है या अपडेट किया जाता है।

TIP इस आदेश की स्थिति के साथ कोड में राज्य को बदलने का प्रयास। इस प्रकार। नाम = 'नया नाम' से कुछ भी नहीं होगा। यह वास्तविक DOM मॉडल को फिर से रेंडर करने और अपडेट करने के लिए प्रेरित नहीं करेगा, जो आप चाहते हैं। ज्यादातर मामलों में, सेटस्टेट () के बिना एक सीधा राज्य परिवर्तन एंटीपैटर्न है और इसे टाला जाना चाहिए।

यह ध्यान रखना महत्वपूर्ण है कि सेटस्टेट () विधि केवल उन राज्यों को अपडेट करती है जो इसे (आंशिक रूप से या विलय कर दिया गया था, लेकिन पूर्ण प्रतिस्थापन के बिना)। यह हर बार पूरे राज्य ऑब्जेक्ट को प्रतिस्थापित नहीं करता है। इसलिए, यदि केवल तीन राज्यों में से एक बदल गया है, तो अन्य दो अपरिवर्तित रहेंगे। निम्नलिखित उदाहरण में, userEmail और userId नहीं बदलेगा:

 constructor(props) { super(props) this.state = { userName: 'Azat Mardan', userEmail: 'hi@azat.co', userId: 3967 } } updateValues() { this.setState({userName: 'Azat'}) } 

यदि आप तीनों राज्यों को अपडेट करने का इरादा रखते हैं, तो आपको इन राज्यों के नए मूल्यों को सेटस्टैट () में पास करके स्पष्ट रूप से करना होगा। (पुराने कोड में, जो अब काम नहीं करता है, यह .replaceState () विधि कभी-कभी पाई जाती है; यह आधिकारिक तौर पर deprecated1 है। जैसा कि आप नाम से अनुमान लगा सकते हैं, इसने पूरे राज्य के ऑब्जेक्ट को अपनी सभी विशेषताओं के साथ बदल दिया।)

याद रखें कि कॉलिंग सेटस्टैट () रेंडर के निष्पादन को आरंभ करता है ()। ज्यादातर मामलों में, यह काम करता है। कुछ विशेष मामलों में जिनमें कोड बाहरी डेटा पर निर्भर करता है, आप इस .forceUpate () को कॉल करके फिर से रेंडर कर सकते हैं। फिर भी, ऐसे निर्णय अवांछनीय हैं, क्योंकि बाहरी डेटा (राज्य के बजाय) पर भरोसा घटकों को कम विश्वसनीय बनाता है और बाहरी कारकों (तंग बंधन) पर निर्भर करता है।

जैसा कि पहले उल्लेख किया गया है, राज्य वस्तु को इस प्रविष्टि में पहुँचा जा सकता है। JSX में, आउटपुट मान घुंघराले ब्रेसिज़ ({}) में संलग्न हैं, इसलिए, एक दृश्य में एक राज्य संपत्ति घोषित करने के लिए (जो कि रेंडर विधि के बदले में आदेश है), संकेतन {this.state.Nn} का उपयोग करें।

प्रतिक्रिया जादू तब होता है जब आप एक दृश्य में राज्य डेटा का उपयोग करते हैं (उदाहरण के लिए, आउटपुट में, अगर / और आदेश में, एक बच्चे के गुण मान या संपत्ति के मूल्य के रूप में), और फिर सेटस्टेट () नए मानों को पास करें। बाह! प्रतिक्रिया आपके लिए सभी आवश्यक HTML मार्कअप को अपडेट करती है। आप इसे DevTools कंसोल में देख सकते हैं, जहाँ "अपडेट ..." और "रेंडरिंग ..." लूप प्रदर्शित किए जाने चाहिए। और महान बात यह है कि यह केवल पूर्ण न्यूनतम आवश्यक DOM तत्वों को प्रभावित करेगा।

»पुस्तक की अधिक जानकारी प्रकाशक की वेबसाइट पर पाई जा सकती है
» सामग्री
» अंश

फेरीवालों के लिए कूपन पर 20% की छूट - प्रतिक्रिया

पुस्तक के पेपर संस्करण के भुगतान पर, पुस्तक का एक इलेक्ट्रॉनिक संस्करण ई-मेल द्वारा भेजा जाता है।