प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 1: परस्पर विरोधी सहारा न बनाएं
प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 2: व्यवहार को नाम दें, सहभागिता नहीं
प्रतिक्रिया घटकों के लिए एपीआई लिखना, भाग 3: सहारा का क्रम महत्वपूर्ण है
रिएक्ट कंपोनेंट्स के लिए एपीआई लिखना, भाग 4: एप्रोपैकलिप्स से सावधान रहें!
प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 5: बस उपयोग संरचना
हम प्रतिक्रियाशील घटकों के लिए एपीआई लिखते हैं, भाग 6: हम घटकों के बीच संचार बनाते हैं
हमारे पास एक स्विच घटक है - Switch , जो प्रोप को स्वीकार करता है, चलो इसे अभी के something कहते हैं।
हमारे घटक का उपयोग करने वाला एक डेवलपर एक फ़ंक्शन पास कर सकता है, और जब मूल्य बदल जाता है, तो हम इसे कॉल करेंगे।
<Switch something={fn} />
प्रतिक्रिया हमें clickHandler कॉल करने की क्षमता देती है जैसे हम: handler / clickHandler / onToggle / onToggle इत्यादि।
कन्वेंशन कि घटना हैंडलर का नाम इसके साथ शुरू होना चाहिए, उदाहरण के लिए, onClick , onClick । ऐसा इसलिए है क्योंकि HTML विनिर्देशन में बहुत सारे हैंडलर हैं जो पहले से ही इस सम्मेलन का अनुसरण करते हैं: onkeydown , onchange , onclick , आदि।
मौजूदा समझौते का पुन: उपयोग करना एक महान विचार है, डेवलपर्स को कुछ नया याद नहीं रखना होगा।
ठीक है, onClick बारे में क्या?
<Switch onClick={fn} />
यहाँ मैं onClick नाम का समर्थक नहीं हूँ, ऐसा नाम बताता है कि इस घटक के साथ बातचीत करने के लिए एक माउस क्लिक ही एकमात्र तरीका है।
मोबाइल डिवाइस पर उपयोगकर्ता स्विच को उंगली से दबा सकते हैं या इसे दाईं ओर खींच सकते हैं। दृष्टिबाधित उपयोगकर्ता इसे स्क्रीन रीडर सॉफ़्टवेयर के साथ उपयोग कर सकते हैं और कीबोर्ड कुंजियों का उपयोग कर सकते हैं।
इस घटक का उपयोग करने वाले एक डेवलपर के रूप में, मैं यह नहीं सोचना चाहता कि उपयोगकर्ता इस घटक के साथ कैसे अंतःक्रिया करते हैं। मैं केवल एक फ़ंक्शन संलग्न करना चाहता हूं जिसे मूल्य बदलने पर कहा जाता है।
अपने एपीआई के लिए नाम दें जो बातचीत करने का एक तरीका नहीं दिखाएगा:
<Switch onToggle={fn} />
यह समझ में आता है, है ना? दो मानों के बीच toggles (टॉगल) टॉगल करें।
एक घटक के अंदर, आप एक ही फ़ंक्शन में सभी संभावित इंटरैक्शन को प्रॉक्सी करना चाह सकते हैं
function Switch(props) { return ( <div className="switch" /* */ onClick={props.onToggle} onKeyDown={function(event) { /* enter , event */ if (event.key === 'Enter') props.onToggle(event) }} onDrag={function(event) { /* */ if (event.toElement === rightSide) props.onToggle(event) }} /> ) }
हमने अपने उपयोगकर्ताओं (डेवलपर्स) को एक स्पष्ट एपीआई देने के लिए सभी विकल्पों को ध्यान में रखा।
अब पाठ इनपुट घटक के बारे में बात करते हैं।
<TextInput />
HTML में एक onchange विशेषता है , React प्रलेखन अपने उदाहरणों में onChange का उपयोग करता है। जाहिर है, इस स्कोर पर एक आम सहमति है।
<TextInput onChange={fn} />
बहुत सरल है।
अब इन दोनों घटकों को एक साथ रख दें।
<TextInput onChange={fn} /> <Switch onToggle={fn} />
देखिए कुछ अजीब?
इस तथ्य के बावजूद कि दोनों घटकों को समान व्यवहार की आवश्यकता होती है, प्रोप को अलग तरीके से कहा जाता है। ये प्रॉप्स अपने संबंधित घटकों के लिए एकदम सही हैं, लेकिन जब आप अपने घटकों को एक साथ देखते हैं, तो यह बहुत विवादास्पद लगता है।
एक डेवलपर जो इन घटकों का उपयोग करेगा, उसे उपयोग करने से पहले हमेशा प्रोप नाम की जांच करनी होगी।
तो यहां टिप # 2 है: घटकों के बीच लगातार सहारा के लिए प्रयास करें । सभी घटकों के लिए एक ही व्यवहार समान होना चाहिए।
यह सलाह निम्नानुसार भी तैयार की जा सकती है: न्यूनतम एपीआई क्षेत्र के लिए प्रयास करें । आपको एपीआई की संख्या को सीमित करना होगा जो एक डेवलपर को उत्पादक से पहले काम करना चाहिए।
मैं यह कहना चाहता हूं कि इस विषय के सभी गुण सेबस्टियन मार्कबेज को जाते हैं । (उनकी प्रस्तुति: न्यूनतम एपीआई भूतल क्षेत्र )
इस सलाह को लागू करने का तरीका यह है कि आप एक प्रोप चुनें और अपने सभी घटकों में इसका उपयोग करें। हमारे उदाहरण में हमारे पास मौजूद दो प्रॉप्स में से onChange HTML विनिर्देशन में भी है, इसलिए कुछ डेवलपर्स इसे पहचान सकते हैं।
<TextInput onChange={fn} /> <Switch onChange={fn} /> <Select onChange={fn} /> // etc.
घटकों के बीच स्थिरता और, परिणामस्वरूप, आपके एपीआई सीखने की सादगी एकल घटक के लिए "आदर्श" प्रोप की पसंद को आगे बढ़ाती है।
एक छोटा सा बोनस।
आइए इस फ़ंक्शन के हस्ताक्षर के बारे में बात करते हैं।
<TextInput onChange={fn} />
onChange इवेंट onChange (इस उदाहरण में fn ) को एक तर्क - event प्राप्त होता है।
यह हर बदलाव के साथ काम करता है। आप इस घटना से उपयोगी जानकारी का एक गुच्छा प्राप्त कर सकते हैं।
function fn(event) { console.log(event.target)
सबसे अधिक संभावना है, अधिकांश डेवलपर्स event.target.value में रुचि event.target.value , ताकि वे इसे कुछ अन्य कार्यों के लिए उपयोग कर सकें - राज्य में उपयोग करें, फ़ॉर्म सबमिट करें, आदि।
हमारे Switch घटक के मामले में, प्रत्येक क्रिया एक अलग "घटना" - event प्रतिनिधित्व करती है। इस event क्लिक करने और खींचने के लिए अलग-अलग गुण होंगे। हम कैसे सुनिश्चित करें कि एपीआई सुसंगत है?
हम प्रत्येक "ईवेंट" के लिए मैन्युअल रूप से event.target.value सेट कर सकते हैं:
function Switch(props) { const fireHandler = event => { const newValue = !oldValue event.target.value = newValue props.onChange(event) } return ( <div className="switch" /* */ onClick={fireHandler} onKeyDown={function(event) { if (event.key === 'Enter') fireHandler(event) }} onDrag={function(event) { if (event.toElement === rightSide) fireHandler(event) }} /> ) }