रिएक्ट ट्यूटोरियल भाग 20: पहला सशर्त प्रतिपादन पाठ

आज, रिएक्ट ट्यूटोरियल के अगले भाग के अनुवाद में, हम सशर्त प्रतिपादन के बारे में बात करेंगे।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 36. सशर्त प्रतिपादन, भाग 1

→ मूल

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

आज हम App.js फ़ाइल में, जिसमें निम्न कोड शामिल है, क्रिएट-रिएक्शन-ऐप टूल्स का उपयोग करके बनाए गए एप्लिकेशन के साथ प्रयोग करेंगे:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

इसके अलावा, उसी फ़ोल्डर में जहां App.js फ़ाइल App.js , वहाँ एक Conditional.js घटक फ़ाइल निम्नलिखित के साथ है:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

काम के इस चरण में, यह एप्लिकेशन अभी तक काम नहीं करेगा, सामग्री के विश्लेषण की प्रक्रिया में हम इसे ठीक कर देंगे।

रिएक्ट डेवलपर्स के सामने चुनौतियों में से एक यह है कि उन्हें कई उपकरण सीखने हैं जो विभिन्न तरीकों से उपयोग किए जा सकते हैं। एक प्रोग्रामर एक निश्चित उपकरण का उपयोग करने के केवल एक तरीके तक सीमित नहीं है। यह इस तथ्य से प्रभावित है कि रिएक्ट विकास सादे जावास्क्रिप्ट में विकसित करने के बेहद करीब है।

इसलिए, हमारे पास समान समस्याओं को हल करने के लिए विभिन्न तरीकों का उपयोग करने का अवसर है, इसलिए एक ही उपकरण को विभिन्न तरीकों से उपयोग किया जा सकता है। सशर्त प्रतिपादन प्रतिक्रिया का वह क्षेत्र है जिसमें उपर्युक्त विचार स्वयं को विशेष रूप से दृढ़ता से प्रकट करते हैं। दरअसल, शुरू करने से पहले, मैं यह नोट करना चाहूंगा कि, हालांकि हम इस तकनीक के अनुप्रयोग के लिए कई दृष्टिकोणों का विश्लेषण करेंगे, लेकिन इसके उपयोग के वास्तविक विकल्प उनके लिए सीमित नहीं हैं।

अब उस कोड के बारे में बात करते हैं जिसके साथ हम अब प्रयोग करेंगे। हम, App.js फ़ाइल में, वर्ग के आधार पर एक घटक है। इसके निर्माता ने एक राज्य को शुरू किया, जिसमें isLoading संपत्ति true । इस तरह के डिजाइन का उपयोग अक्सर उन मामलों में किया जाता है, जहां एक घटक को काम करने की स्थिति में लाने के लिए, यह आवश्यक है, उदाहरण के लिए, एक निश्चित एपीआई के अनुरोधों को निष्पादित करने के लिए, और जबकि घटक डेटा के आने और इसे पार्स करने के लिए इंतजार कर रहा है, कुछ को स्क्रीन पर दिखाने की आवश्यकता है। एपीआई कॉल को पूरा करने में 3-4 सेकंड का समय लग सकता है, और आप स्क्रीन पर देखने वाले उपयोगकर्ता को यह नहीं सोचना चाहते हैं कि आपका एप्लिकेशन क्रैश हो गया है। नतीजतन, राज्य के पास एक संपत्ति है जो इंगित करती है कि क्या वर्तमान में आवेदन कुछ सेवा कार्यों का प्रदर्शन कर रहा है। और सशर्त रेंडरिंग का उपयोग कुछ ऐसा प्रदर्शित करने के लिए किया जाएगा जो उपयोगकर्ता को बताता है कि एप्लिकेशन वर्तमान में पृष्ठभूमि में कुछ लोड कर रहा है।

App कंपोनेंट कोड में एक componentDidMount() विधि है, जिसके बारे में हम बहुत जल्द चर्चा करेंगे। इस बीच, आइए render() विधि पर ध्यान दें। यहां हम Condition कंपोनेंट को आउटपुट करते हैं, जो कि App.js फ़ाइल के शीर्ष पर स्थित कोड में आयात किया जाता है। इस घटक को इस घटक को पास किया जाता है, जो App घटक की स्थिति से isLoading संपत्ति का वर्तमान मूल्य है। Conditional घटक का कोड कुछ भी वापस नहीं करता है जिसे स्क्रीन पर प्रदर्शित किया जा सकता है, हम इस घटक से थोड़ी देर बाद निपटेंगे। इस बीच, आइए वापस App कंपोनेंट कोड से componentDidMount() विधि पर वापस आते हैं।

याद रखें कि componentDidMount() विधि हमें घटक के तुरंत बाद कुछ कोड निष्पादित करने की अनुमति देती है, हमारे मामले में यह App घटक है, पहले प्रदर्शित किया जाता है। इस पद्धति के कोड में, हम एक निश्चित एपीआई के लिए एक अपील का अनुकरण करते हैं। यहां हमने डेढ़ सेकंड के लिए टाइमर सेट किया। जब यह समय बीत जाता है, तो setTimeout() पारित फ़ंक्शन का कोड लॉन्च किया जाएगा। इस फ़ंक्शन में, इस धारणा के आधार पर कि इसकी कॉल एपीआई से डेटा लोडिंग के अंत का प्रतीक है, एक राज्य परिवर्तन किया जाता है। अर्थात्, अपनी isLoading संपत्ति को false सेट किया गया false । यह इंगित करता है कि डेटा डाउनलोड पूरा हो गया है, और उसके बाद एप्लिकेशन सामान्य रूप से काम कर सकता है। भविष्य की कक्षाओं में, हम डेटा लोड करने के लिए fetch() फ़ंक्शन का उपयोग करने के बारे में बात करेंगे, अब हम इस प्रक्रिया के उपरोक्त सिमुलेशन में खुद को सीमित कर लेंगे।

वैसे, घटक जीवन चक्र विधियों के विषय को उठाने के लिए एक बार फिर यहां उपयुक्त होगा। तथ्य यह है कि जैसे ही isLoading राज्य संपत्ति true से false बदलती है, Conditional घटक को एक नया गुण मान प्राप्त होता है। सबसे पहले, पहली बार घटक प्रदर्शित किया जाता है, यह isLoading संपत्ति में प्राप्त करता है, true , और फिर, राज्य बदलने के बाद, यह नए मूल्य के साथ समान संपत्ति प्राप्त करता है। वास्तव में, जब स्थिति में परिवर्तन होता है, तो render() विधि को फिर से कहा जाता है, परिणामस्वरूप, Conditional घटक भी फिर से प्रदर्शित किया जाएगा। स्मरण करो कि Conditional एक सामान्य कार्यात्मक घटक है, अर्थात्, इसके पुन: प्रतिपादन का अर्थ है उस फ़ंक्शन को बार-बार कॉल करना जिसे वह प्रस्तुत किया गया है। लेकिन जब हम पुन: रेंडर करते हैं, तो इस फ़ंक्शन से हम क्या वापसी करते हैं, यह उस चीज़ से भिन्न हो सकती है जो पहले वापस की गई थी। इस परिवर्तन का कारण घटक में हम जो बदलाव करते हैं, वह परिवर्तन है।

तो, Conditional घटक isLoading गुण को स्वीकार करता है। इससे पहले कि हम कोड पर काम करना शुरू करें, हम यह जांचेंगे कि क्या उन तंत्रों में जो पहले से ही मौजूद हैं। ऐसा करने के लिए, हम घटक से कुछ मार्कअप props.isLoading और कंसोल में मान props.isLoading प्रदर्शित करेंगे। उसके बाद, घटक कोड इस तरह दिखेगा:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

उसके बाद का आवेदन पृष्ठ निम्न आकृति में दिखाया गया है।


ब्राउज़र में एप्लिकेशन पेज

कृपया ध्यान दें कि एप्लिकेशन को लोड करने के तुरंत बाद कंसोल में प्रदर्शित किया गया है, और 1.5 सेकंड के बाद - false । यह App घटक के App componentDidMount() विधि में उपरोक्त तंत्र के संचालन के कारण है।

अब चलो सशर्त प्रतिपादन के बारे में बात करते हैं। इसका सार इस तथ्य में निहित है कि हम स्क्रीन पर कुछ प्रदर्शित करते हैं यदि एक निश्चित स्थिति पूरी होती है। इस मामले में, पृष्ठ पर स्ट्रिंग Temp प्रदर्शित करने के बजाय, हम, Conditional घटक में, props.isLoading के मूल्य की जांच कर सकते हैं, और यदि यह true , तो पृष्ठ पर Loading... पाठ प्रदर्शित करें। यदि यह मान false , जो डाउनलोड के अंत को इंगित करता है, तो आप घटक से कुछ अन्य पाठ वापस कर सकते हैं। कोड में, यह इस तरह दिखेगा:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

इस कोड को अपने घर में चलाने का प्रयास करें, पृष्ठ को रीफ्रेश करें और देखें कि कैसे, जब पृष्ठ लोड होता है, एक पाठ प्रदर्शित होता है, और थोड़ी देर बाद - दूसरा।

जावास्क्रिप्ट सुविधाओं को देखते हुए, हम उपरोक्त कोड को इस तरह सरल कर सकते हैं:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

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

अब आइए इस बारे में बात करते हैं कि आप टर्नरी ऑपरेटर के उपयोग से सशर्त प्रतिपादन की समस्याओं को कैसे हल कर सकते हैं। यह निर्माण बहुत लंबे समय तक जावास्क्रिप्ट में मौजूद है। इसका उपयोग अक्सर अभिकर्मक में सशर्त प्रतिपादन कार्यों को हल करने के लिए किया जाता है। यहाँ यह कैसा दिखता है:

  ? 1 : 2 

यदि स्थिति सही है, तो अभिव्यक्ति 1 का मान लौटाया जाता है, यदि स्थिति झूठी है, तो अभिव्यक्ति 2 का मान लौटाया जाता है।

हमारे मामले में, टर्नरी ऑपरेटर का उपयोग करते हुए, Conditional घटक का कोड निम्नानुसार फिर से लिखा जा सकता है:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

यह डिजाइन, हालांकि यह काम करता है, असामान्य दिखता है। तथ्य यह है कि आमतौर पर घटक अधिक जटिल डिजाइन लौटाते हैं। इसलिए, इसे सभी <div> तत्व में लपेटें:

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

इस तरह के कोड भी काम करते हैं, हालांकि यह अब वैसा नहीं है जैसा इसे होना चाहिए। सब कुछ जो <div&gtl; में संलग्न है <div&gtl; । इसे ठीक करने के लिए, हमें याद है कि घटकों से लौटाए गए मार्कअप में उपयोग किए गए जेएस निर्माण को ब्रेसिज़ में संलग्न किया जाना चाहिए और तदनुसार कोड को फिर से लिखना चाहिए:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

अब सब कुछ उसी तरह काम करता है जैसा उसे फिर से करना चाहिए।

यह ध्यान दिया जाना चाहिए कि वास्तविक घटक में उनके द्वारा दिया गया मार्कअप अधिक जटिल होगा। यहाँ, उदाहरण के लिए, घटक जो प्रदर्शित करता है उसके ऊपरी भाग में, एक नेविगेशन बार मौजूद हो सकता है, निचले हिस्से में पृष्ठ का "पाद" प्रदान किया जा सकता है, और इसी तरह। यह इस तरह लग सकता है:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

इसके अलावा, अतिरिक्त तत्वों के घटक द्वारा दिए गए मार्कअप में उपस्थिति सशर्त प्रतिपादन के तंत्र के साथ हस्तक्षेप नहीं करती है। इसके अलावा, इन तत्वों को दोनों तब प्रदर्शित किया जाएगा जब props.isLoading true , और जब यह संपत्ति false ।

एक और सुधार जो इस कोड में किया जा सकता है, वह इस तथ्य पर आधारित है कि, चूंकि props.isLoading एक बूलियन संपत्ति है जो मूल्य को true या false props.isLoading है, इसका उपयोग सीधे true साथ सख्त तुलना ऑपरेटर का उपयोग किए बिना किया जा सकता true । परिणाम निम्नलिखित है:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

अब हम सशर्त प्रतिपादन प्रौद्योगिकी के उपयोग का एक कार्य उदाहरण के लिए आए हैं, लेकिन एक ही परिणाम कई तरीकों से प्राप्त किया जा सकता है। उदाहरण के लिए, आमतौर पर हमारे, नेविगेशन पैनल और पृष्ठ पाद जैसे घटकों को प्रदर्शित नहीं किया जाता है। इस तरह के पेज एलिमेंट्स आमतौर पर या तो App कंपोनेंट द्वारा ही प्रदर्शित किए जाते हैं, या App कंपोनेंट द्वारा प्रदर्शित विशेष कंपोनेंट्स द्वारा।

इसके अलावा, यह ध्यान दिया जाना चाहिए कि यहां सशर्त प्रतिपादन के सभी तर्क कार्यात्मक घटक के render() विधि के अंदर स्थित हैं, जो केवल एक जगह इकट्ठे कॉम्पैक्ट कोड को प्रदर्शित करने के लिए किया गया था। लेकिन, शायद, सशर्त प्रतिपादन के लिए App घटक जिम्मेदार होना चाहिए, और हमारे Conditional घटक के समान एक घटक को बस यह प्रदर्शित करना चाहिए कि इसके लिए क्या पारित किया गया था। यदि App घटक यह पता लगाने के लिए ज़िम्मेदार है कि क्या कुछ निश्चित समय पर लोड हो रहा है, और जब यह ऑपरेशन पूरा हो जाता है, तो यह सबसे अधिक संभावना यह निर्धारित करने के लिए ज़िम्मेदार होना चाहिए कि पृष्ठ पर क्या प्रदर्शित किया जाना चाहिए। अर्थात्, हमारे मामले में, App घटक के render() पद्धति में isLoading संपत्ति की जाँच करके और Loading... जैसे पाठ को प्रदर्शित करने के लिए कोड को पुनर्गठित किया जा सकता है Loading... यदि मामला पूरा नहीं हुआ है, या कंडेनसर घटक के समान एक घटक प्रदर्शित कर रहा है; यदि डाउनलोड पूरा हो गया है। उसी समय, Conditional घटक अच्छी तरह से App से गुणों को स्वीकार नहीं कर सकता है, केवल यह प्रदर्शित करता है कि किसी भी मामले में इसका उत्पादन क्या होना चाहिए।

यहाँ पर इन घटकों के अनुसार ऐप घटक कोड कैसा दिखता है, इसे रूपांतरित किया गया है:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

और यहां Conditional घटक का अद्यतन कोड है, जिसमें अब किसी भी स्थिति का सत्यापन नहीं है:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

हालांकि, हमने नेविगेशन बार और "बेसमेंट" को हटा दिया है, लेकिन इस मामले में यह महत्वपूर्ण नहीं है।

परिणाम

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

प्रिय पाठकों! यदि आप प्रतिक्रिया अनुप्रयोगों को विकसित कर रहे हैं, तो हम आपको सशर्त प्रदान करने के तरीके के बारे में बताने के लिए कहते हैं।