रिएक्ट ट्यूटोरियल भाग 26: एप्लिकेशन आर्किटेक्चर, कंटेनर / घटक पैटर्न

रिएक्ट ट्यूटोरियल के अनुवाद के इस भाग में, हम रिएक्ट एप्लिकेशन की वास्तुकला के बारे में बात करेंगे। विशेष रूप से, हम लोकप्रिय कंटेनर / घटक पैटर्न पर चर्चा करेंगे।



→ भाग 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: पाठ्यक्रम परियोजना

पाठ 44. एप्लिकेशन आर्किटेक्चर, कंटेनर / घटक पैटर्न

→ मूल

कभी-कभी काम की मात्रा जिसके लिए एक अलग घटक जिम्मेदार होता है, वह बहुत बड़ा होता है; एक घटक को कई कार्यों को हल करना होता है। कंटेनर / घटक पैटर्न का उपयोग करने से आप एप्लिकेशन के तर्क को उसके दृश्य प्रतिनिधित्व के गठन के तर्क से अलग कर सकते हैं। यह आपको आवेदन की संरचना में सुधार करने की अनुमति देता है, विभिन्न घटकों के बीच विभिन्न कार्यों के प्रदर्शन के लिए जिम्मेदारी साझा करने के लिए।

पिछले व्यावहारिक पाठ में, हमने एक विशाल घटक बनाया था जिसकी कोड लंबाई 150 लाइनों के पास है। यह कोड हमें तब मिला है:

import React, {Component} from "react" class App extends Component {    constructor() {        super()        this.state = {            firstName: "",            lastName: "",            age: "",            gender: "",            destination: "",            isVegan: false,            isKosher: false,            isLactoseFree: false        }        this.handleChange = this.handleChange.bind(this)    }       handleChange(event) {        const {name, value, type, checked} = event.target        type === "checkbox" ?            this.setState({                [name]: checked            })        :        this.setState({            [name]: value        })    }       render() {        return (            <main>                <form>                    <input                        name="firstName"                        value={this.state.firstName}                        onChange={this.handleChange}                        placeholder="First Name"                    />                    <br />                                       <input                        name="lastName"                        value={this.state.lastName}                        onChange={this.handleChange}                        placeholder="Last Name"                    />                    <br />                                       <input                        name="age"                        value={this.state.age}                        onChange={this.handleChange}                        placeholder="Age"                    />                    <br />                                       <label>                        <input                            type="radio"                            name="gender"                            value="male"                            checked={this.state.gender === "male"}                            onChange={this.handleChange}                        /> Male                    </label>                                       <br />                                       <label>                        <input                            type="radio"                            name="gender"                            value="female"                            checked={this.state.gender === "female"}                            onChange={this.handleChange}                        /> Female                    </label>                                       <br />                                       <select                        value={this.state.destination}                        name="destination"                        onChange={this.handleChange}                    >                        <option value="">-- Please Choose a destination --</option>                        <option value="germany">Germany</option>                        <option value="norway">Norway</option>                        <option value="north pole">North Pole</option>                        <option value="south pole">South Pole</option>                    </select>                                       <br />                                       <label>                        <input                            type="checkbox"                            name="isVegan"                            onChange={this.handleChange}                            checked={this.state.isVegan}                        /> Vegan?                    </label>                    <br />                                       <label>                        <input                            type="checkbox"                            name="isKosher"                            onChange={this.handleChange}                            checked={this.state.isKosher}                        /> Kosher?                    </label>                    <br />                                       <label>                        <input                            type="checkbox"                            name="isLactoseFree"                            onChange={this.handleChange}                            checked={this.state.isLactoseFree}                        /> Lactose Free?                    </label>                    <br />                                       <button>Submit</button>                </form>                <hr />                <h2><font color="#3AC1EF">Entered information:</font></h2>                <p>Your name: {this.state.firstName} {this.state.lastName}</p>                <p>Your age: {this.state.age}</p>                <p>Your gender: {this.state.gender}</p>                <p>Your destination: {this.state.destination}</p>                <p>Your dietary restrictions:</p>                               <p>Vegan: {this.state.isVegan ? "Yes" : "No"}</p>                <p>Kosher: {this.state.isKosher ? "Yes" : "No"}</p>                <p>Lactose Free: {this.state.isLactoseFree ? "Yes" : "No"}</p>                           </main>        )    } } export default App 

इस कोड का पहला दोष, जो तुरंत आपकी आंख को पकड़ता है, वह यह है कि इसके साथ काम करते समय, आपको लगातार इसे संपादक विंडो में स्क्रॉल करना होगा।

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

कुछ अध्ययनों के परिणामों के अनुसार, यह ज्ञात है कि कोड को देखने के लिए एक प्रोग्रामर की क्षमता वह देख रहा है यदि कोड काफी लंबा है, और प्रोग्रामर को इसे संपूर्णता में देखने के लिए स्क्रॉलिंग का उपयोग करना पड़ता है। मैंने कक्षाओं के दौरान इस पर ध्यान दिया। जब मैं जिस कोड के बारे में बात कर रहा हूं वह काफी लंबा हो जाता है, और मुझे लगातार इसके माध्यम से स्क्रॉल करना पड़ता है, तो छात्रों के लिए इसे समझना अधिक कठिन हो जाता है।

यह अच्छा होगा यदि हम अपने कोड को फिर से तैयार करें, एप्लिकेशन इंटरफ़ेस के निर्माण के लिए विभिन्न घटकों के बीच जिम्मेदारी साझा करना (जो अब render() विधि में वर्णित है) और एप्लिकेशन लॉजिक के कार्यान्वयन के लिए, अर्थात यह कैसे दिखना चाहिए। इंटरफ़ेस (संबंधित कोड अब उस घटक के निर्माता द्वारा दर्शाया गया है जिसमें राज्य को इनिशियलाइज़ किया गया है, और handleChange() कंट्रोल इवेंट हैंडलर)। एप्लिकेशन डिज़ाइन के लिए इस दृष्टिकोण का उपयोग करते समय, हम, वास्तव में, दो प्रकार के घटकों के साथ काम करते हैं, और यह ध्यान दिया जाना चाहिए कि आप ऐसे घटकों के लिए विभिन्न नामों का सामना कर सकते हैं।

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

→ यहाँ दान अब्रामोव की सामग्री है जिसमें वह इस विचार की पड़ताल करता है।

हम कंटेनर / घटक पैटर्न के अनुसार अपने आवेदन के कोड को बदलते हैं।
पहले, आइए इस तथ्य पर ध्यान दें कि अब एप्लिकेशन में सब कुछ App एक घटक में इकट्ठा हो गया है। इस एप्लिकेशन को इस तरह से डिज़ाइन किया गया है कि इसकी संरचना को जितना संभव हो सके उतना सरल बनाया जाए, लेकिन वास्तविक परियोजनाओं में App घटक इस फॉर्म के आंतरिक तंत्र के काम को व्यवस्थित करने के लिए फॉर्म को रेंडर करने के कार्य को स्थानांतरित करने और इसमें कोड को शामिल करने के लिए समझ में नहीं आता है।

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

 import React, {Component} from "react" import Form from "./Form" function App() {   return (       <Form />   ) } export default App 

यहाँ काम के इस स्तर पर स्क्रीन पर एप्लिकेशन क्या प्रदर्शित करता है।


ब्राउज़र में अनुप्रयोग

पिछली कक्षाओं में, मैंने आपको बताया था कि मैं App घटक" तालिका की तरह कुछ होने के लिए App घटक को पसंद करता हूं, जो इंगित करता है कि पृष्ठ पर इसके खंड किस क्रम में प्रदर्शित किए जाते हैं, अन्य घटकों द्वारा प्रस्तुत किए जाते हैं जो आवेदन के बड़े टुकड़ों को प्रस्तुत करने के कार्य सौंपे जाते हैं।

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

 import Form from "./FormContainer" 

आप Form घटक का नाम बदलकर Form FormContainer भी रख सकते हैं, लेकिन हम ऐसा नहीं करेंगे। अब हम फॉर्म को जमा करने के लिए जिम्मेदार कोड को FormContainer.js फ़ाइल से FormContainer.js फ़ाइल में स्थानांतरित करेंगे।

FormComponent घटक कार्यशील होगा। यहां बताया गया है कि उसका कोड काम के इस चरण को कैसे देखेगा:

 function FormComponent(props) {   return (       <main>           <form>               <input                   name="firstName"                   value={this.state.firstName}                   onChange={this.handleChange}                   placeholder="First Name"               />               <br />                             <input                   name="lastName"                   value={this.state.lastName}                   onChange={this.handleChange}                   placeholder="Last Name"               />               <br />                             <input                   name="age"                   value={this.state.age}                   onChange={this.handleChange}                   placeholder="Age"               />               <br />                             <label>                   <input                       type="radio"                       name="gender"                       value="male"                       checked={this.state.gender === "male"}                       onChange={this.handleChange}                   /> Male               </label>                             <br />                             <label>                   <input                       type="radio"                       name="gender"                       value="female"                       checked={this.state.gender === "female"}                       onChange={this.handleChange}                   /> Female               </label>                             <br />                             <select                   value={this.state.destination}                   name="destination"                   onChange={this.handleChange}               >                   <option value="">-- Please Choose a destination --</option>                   <option value="germany">Germany</option>                   <option value="norway">Norway</option>                   <option value="north pole">North Pole</option>                   <option value="south pole">South Pole</option>               </select>                             <br />                             <label>                   <input                       type="checkbox"                       name="isVegan"                       onChange={this.handleChange}                       checked={this.state.isVegan}                   /> Vegan?               </label>               <br />                             <label>                   <input                       type="checkbox"                       name="isKosher"                       onChange={this.handleChange}                       checked={this.state.isKosher}                   /> Kosher?               </label>               <br />                             <label>                   <input                       type="checkbox"                       name="isLactoseFree"                       onChange={this.handleChange}                       checked={this.state.isLactoseFree}                   /> Lactose Free?               </label>               <br />                             <button>Submit</button>           </form>           <hr />           <h2><font color="#3AC1EF">Entered information:</font></h2>           <p>Your name: {this.state.firstName} {this.state.lastName}</p>           <p>Your age: {this.state.age}</p>           <p>Your gender: {this.state.gender}</p>           <p>Your destination: {this.state.destination}</p>           <p>Your dietary restrictions:</p>                     <p>Vegan: {this.state.isVegan ? "Yes" : "No"}</p>           <p>Kosher: {this.state.isKosher ? "Yes" : "No"}</p>           <p>Lactose Free: {this.state.isLactoseFree ? "Yes" : "No"}</p>                 </main>   ) } 

यदि आप इस कोड को देखते हैं, तो यह स्पष्ट हो जाता है कि हम इसे फ़ाइल से फ़ाइल में स्थानांतरित करने के लिए स्वयं को सीमित नहीं कर सकते हैं, क्योंकि अब राज्य में लिंक हैं (उदाहरण के लिए, यह this.state.firstName ) और ईवेंट हैंडलर (यह this.handleChange ), जो कक्षा के आधार पर उसी घटक में हुआ करता था जो इस रेंडरिंग कोड में था। अब, सब कुछ जो पहले उसी वर्ग से लिया गया था जिसमें रेंडरिंग कोड स्थित था, घटक को पास किए गए गुणों से लिया जाएगा। कुछ अन्य समस्याएं हैं। अब हम इस कोड को ठीक कर देंगे, लेकिन पहले हम Form कंपोनेंट के कोड पर लौट आएंगे, जो कि अब FormContainer.js फ़ाइल में है।

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

 import React, {Component} from "react" import FormComponent from "./FormComponent" class Form extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: "",           age: "",           gender: "",           destination: "",           isVegan: false,           isKosher: false,           isLactoseFree: false       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value, type, checked} = event.target       type === "checkbox" ?           this.setState({               [name]: checked           })       :       this.setState({           [name]: value       })   }     render() {       return(           <FormComponent               handleChange={this.handleChange}               data={this.state}           />       )   } } export default Form 

हम FormComponent घटक FormComponent कोड को FormComponent करेंगे, इसे निम्न रूप में FormComponent :

 import React from "react" function FormComponent(props) {   return (       <main>           <form>               <input                   name="firstName"                   value={props.data.firstName}                   onChange={props.handleChange}                   placeholder="First Name"               />               <br />                             <input                   name="lastName"                   value={props.data.lastName}                   onChange={props.handleChange}                   placeholder="Last Name"               />               <br />                             <input                   name="age"                   value={props.data.age}                   onChange={props.handleChange}                   placeholder="Age"               />               <br />                             <label>                   <input                       type="radio"                       name="gender"                       value="male"                       checked={props.data.gender === "male"}                       onChange={props.handleChange}                   /> Male               </label>                             <br />                             <label>                   <input                       type="radio"                       name="gender"                       value="female"                       checked={props.data.gender === "female"}                       onChange={props.handleChange}                   /> Female               </label>                             <br />                             <select                   value={props.data.destination}                   name="destination"                   onChange={props.handleChange}               >                   <option value="">-- Please Choose a destination --</option>                   <option value="germany">Germany</option>                   <option value="norway">Norway</option>                   <option value="north pole">North Pole</option>                   <option value="south pole">South Pole</option>               </select>                             <br />                             <label>                   <input                       type="checkbox"                       name="isVegan"                       onChange={props.handleChange}                       checked={props.data.isVegan}                   /> Vegan?               </label>               <br />                             <label>                   <input                       type="checkbox"                       name="isKosher"                       onChange={props.handleChange}                       checked={props.data.isKosher}                   /> Kosher?               </label>               <br />                             <label>                   <input                       type="checkbox"                       name="isLactoseFree"                       onChange={props.handleChange}                       checked={props.data.isLactoseFree}                   /> Lactose Free?               </label>               <br />                             <button>Submit</button>           </form>           <hr />           <h2><font color="#3AC1EF">Entered information:</font></h2>           <p>Your name: {props.data.firstName} {props.data.lastName}</p>           <p>Your age: {props.data.age}</p>           <p>Your gender: {props.data.gender}</p>           <p>Your destination: {props.data.destination}</p>           <p>Your dietary restrictions:</p>                     <p>Vegan: {props.data.isVegan ? "Yes" : "No"}</p>           <p>Kosher: {props.data.isKosher ? "Yes" : "No"}</p>           <p>Lactose Free: {props.data.isLactoseFree ? "Yes" : "No"}</p>                 </main>   ) } export default FormComponent 

यहां हमने इस तथ्य को ध्यान में रखते हुए कोड तय किया कि घटक अब डेटा प्राप्त करता है और गुणों के माध्यम से घटना हैंडलर के लिए एक लिंक।

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

नतीजतन, हमने घटकों के बीच जिम्मेदारियों का पृथक्करण हासिल कर लिया है। FormContainer.js फ़ाइल से Form घटक अब एप्लिकेशन लॉजिक द्वारा विशेष रूप से कब्जा कर लिया गया है, जबकि FormComponent.js फ़ाइल से FormComponent घटक में केवल कोड होता है जो एप्लिकेशन इंटरफ़ेस बनाता है। App घटक अब केवल बड़े ब्लॉकों से पृष्ठ को इकट्ठा करने के लिए जिम्मेदार है।

यह ध्यान देने योग्य है कि, Redux जैसी पुस्तकालयों के अस्तित्व और हाल ही में जारी किए गए Context एपीआई को देखते हुए, यहां चर्चा की गई कंटेनर / घटक पैटर्न अब पहले की तरह प्रासंगिक नहीं है। उदाहरण के लिए, Redux एक ऐसे अनुप्रयोग की वैश्विक स्थिति का समर्थन कर सकता है जिसका उपयोग घटक कर सकते हैं।

परिणाम

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

प्रिय पाठकों! प्रतिक्रिया अनुप्रयोगों को विकसित करते समय आप किस डिज़ाइन पैटर्न का उपयोग करते हैं?