रिएक्ट में इंटरसेप्टर से निपटना

नमस्कार, हेब्र!

अविश्वसनीय गर्व और राहत के साथ, हमने आज रात प्रिंटिंग हाउस को रिएक्ट के बारे में एक नई पुस्तक सौंपी।



इस अवसर पर, हम आपको प्रतिक्रिया के 16 वें संस्करण में इंटरसेप्टर के उपयोग का वर्णन करते हुए, दान अब्रामोव के एक लेख का थोड़ा संक्षिप्त अनुवाद प्रस्तुत करते हैं। पुस्तक, जिसे हम स्वयं पहले से ही देख रहे हैं, अध्याय 5 में वर्णित है।

पिछले हफ्ते, सोफी अल्परट और मैंने रिएक्ट कॉन्फ कॉन्फ्रेंस में "इंटरसेप्टर्स" की अवधारणा को पेश किया, इसके बाद रयान फ्लोरेंस से विषय की विस्तृत चर्चा की।

मैं दृढ़ता से सलाह देता हूं कि आप इस पूर्ण व्याख्यान को स्वयं को उन समस्याओं से परिचित कराने के लिए देखें, जिन्हें हम इंटरसेप्टर की सहायता से हल करने का प्रयास कर रहे हैं। हालांकि, मैं आपके समय के घंटे की बहुत सराहना करता हूं, इसलिए मैंने इस लेख में कुछ समय के लिए इंटरसेप्टर पर मुख्य विचार करने का फैसला किया।

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

इंटरसेप्टर की आवश्यकता क्यों है?

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

• विशाल घटक जो रिफ्लेक्टर और परीक्षण करना मुश्किल है।
• विभिन्न घटकों और जीवन चक्र विधियों के बीच तर्क का दोहराव ।
• जटिल पैटर्न , विशेष रूप से, रंगमंच की सामग्री और उच्च-क्रम के घटक।

हमारा मानना ​​है कि इन सभी समस्याओं के समाधान के लिए इंटरसेप्टर सबसे आशाजनक हैं। इंटरसेप्टर पुन: प्रयोज्य पृथक इकाइयों के रूप में घटक के अंदर तर्क को व्यवस्थित करने में मदद करते हैं :





इंटरसेप्टर रिएक्ट दर्शन (स्पष्ट डेटा प्रवाह और संरचना) और एक घटक के भीतर हैं, न कि केवल घटकों के बीच । इसलिए मुझे ऐसा लगता है कि इंटरसेप्टर स्वाभाविक रूप से रिएक्ट घटक मॉडल में फिट होते हैं।

रेंडरिंग प्रॉपर्टीज या हाई-ऑर्डर कंपोनेंट्स जैसे पैटर्न के विपरीत, स्निफर्स आपके कंपोनेंट ट्री को अनावश्यक रूप से डीप अटैचमेंट के साथ बोझ नहीं बनाते हैं। इसके अलावा, वे नुकसान नहीं है कि अशुद्धियों में निहित हैं।

यहां तक ​​कि अगर पहली नज़र में इंटरसेप्टर आपको ताना देते हैं (जैसे कि मुझे पहली बार में!) मैं इस विकल्प को एक मौका देने और इसके साथ प्रयोग करने की सलाह देता हूं। मुझे लगता है कि आप इसे पसंद करेंगे।

इंटरसेप्टर्स के कारण रिएक्टिव सूजन है?

जब तक हमने इंटरसेप्टर्स को विस्तार से कवर नहीं किया है, तब तक आप चिंतित हो सकते हैं कि रिएक्ट में इंटरसेप्टर जोड़ना केवल संस्थाओं का गुणन है। यह निष्पक्ष आलोचना है। मुझे यह लगता है: हालांकि, अल्पावधि में, आप वास्तव में एक अतिरिक्त संज्ञानात्मक भार (उन्हें अध्ययन करने के लिए) महसूस करते हैं, अंत में आप केवल बेहतर महसूस करेंगे।

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

कार्यान्वयन के आकार में वृद्धि के लिए, इंटरसेप्टर के समर्थन के साथ रिएक्ट एप्लिकेशन केवल ~ 1.5kB (न्यूनतम + गज़िप) से बढ़ता है। जबकि यह अपने आप में बहुत अधिक नहीं है, यह बहुत संभावना है कि इंटरसेप्टर का उपयोग करते समय, आपके विधानसभा का आकार और भी कम हो जाएगा , क्योंकि इंटरसेप्टर कोड आमतौर पर कक्षाओं का उपयोग करने वाले समकक्ष कोड से बेहतर होता है। निम्न उदाहरण थोड़ा चरम है, लेकिन यह स्पष्ट रूप से प्रदर्शित करता है कि सब कुछ ऐसा क्यों है (पूरे धागे का विस्तार करने के लिए क्लिक करें ):



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

यह क्या है - इंटरसेप्टर?

यह समझने के लिए कि इंटरसेप्टर क्या हैं, आपको एक कदम पीछे जाने की जरूरत है और यह सोचना चाहिए कि कोड का पुन: उपयोग क्या है।

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

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

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

क्योंकि इंटरसेप्टर नियमित जावास्क्रिप्ट फ़ंक्शन हैं, आप "देशी इंटरसेप्टर्स" बनाने के लिए रिएक्ट में प्रदान किए गए अंतर्निहित इंटरसेप्टर को जोड़ सकते हैं । इस प्रकार, जटिल समस्याओं को कोड की एक पंक्ति के साथ हल किया जा सकता है, और फिर इसे अपने आवेदन में गुणा कर सकते हैं, या प्रतिक्रिया समुदाय में साझा कर सकते हैं

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

मुझे कोड दिखाओ!

मान लें कि हम वर्तमान विंडो की चौड़ाई के लिए एक घटक की सदस्यता चाहते हैं (उदाहरण के लिए, अन्य सामग्री या एक संकीर्ण देखने के क्षेत्र को प्रदर्शित करने के लिए)।
समान कोड को आज कई तरीकों से लिखा जा सकता है। उदाहरण के लिए, एक क्लास बनाने के लिए, कई जीवनचक्र के तरीकों का निर्माण करें, या शायद रेंडरिंग गुणों का भी सहारा लें या यदि आप पुन: उपयोग कर रहे हैं तो उच्च-ऑर्डर घटक लागू करें। हालाँकि, मुझे लगता है कि कुछ भी इसकी तुलना नहीं करता है:



gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae

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

विचार करें कि इस स्वयं के इंटरसेप्टर को कैसे लागू किया जा सकता है। हम इसमें मौजूद विंडो की चौड़ाई को बनाए रखने के लिए स्थानीय प्रतिक्रिया स्थिति का उपयोग कर सकते हैं, और एक साइड का उपयोग करके विंडो को आकार बदलने पर स्थिति सेट कर सकते हैं:



gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae

जैसा कि ऊपर दिखाया गया है, रिएक्ट के अंतर्निहित इंटरसेप्टर्स जैसे useState और useEffect ईंटों के रूप में काम करते हैं। हम उन्हें सीधे हमारे घटकों से उपयोग कर सकते हैं, या अपने स्वयं के इंटरसेप्टर को उनसे इकट्ठा कर सकते हैं, उदाहरण के लिए , useWindowWidth । अपने स्वयं के इंटरसेप्टर का उपयोग करना बिल्ट-इन रिएक्ट एपीआई के साथ काम करने से कम नहीं है।

इस समीक्षा में अंतर्निहित इंटरसेप्टर के बारे में और पढ़ें।

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

प्रत्येक इंटरसेप्टर में कुछ स्थानीय स्थिति और दुष्प्रभाव हो सकते हैं। आप कई इंटरसेप्टर के बीच डेटा ट्रांसफर कर सकते हैं, जैसा कि आमतौर पर फंक्शन्स के बीच किया जाता है। वे तर्क ले सकते हैं और मान लौटा सकते हैं क्योंकि वे जावास्क्रिप्ट कार्य हैं।

यहाँ एक प्रतिक्रिया एनीमेशन लाइब्रेरी का एक उदाहरण है जहाँ हम इंटरसेप्टर्स के साथ प्रयोग करते हैं:
ध्यान दें कि दिखाए गए स्रोत कोड में आश्चर्यजनक एनीमेशन कैसे लागू किया जाता है: हम एक ही रेंडरिंग फ़ंक्शन के भीतर कई देशी इंटरसेप्टर्स के बीच मानों को पास करते हैं।



codesandbox.io/s/ppxnl191zx

(इस उदाहरण पर इस गाइड में अधिक विस्तार से चर्चा की गई है।)

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

कक्षाओं के बारे में क्या?

हमारी राय में, हमारे स्वयं के इंटरसेप्टर पूरे प्रस्ताव में सबसे दिलचस्प विवरण हैं। लेकिन अपने स्वयं के इंटरसेप्टर के कार्यात्मक होने के लिए, रिएक्ट को कार्यों के स्तर पर राज्य और साइड इफेक्ट घोषित करने की क्षमता प्रदान करनी चाहिए। यह वही है जो हमें useState करने की अनुमति देता है जैसे कि इंटरसेप्टर का useState और useEffect । प्रलेखन में इसके बारे में और पढ़ें।

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

यदि इंटरसेप्टर जादू हो तो क्या होगा?

शायद इंटरसेप्टर नियम आपको चकरा देंगे।

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

अत्यधिक सिंटैक्स शोर की शुरुआत या नुकसान पैदा किए बिना अपने स्वयं के इंटरसेप्टर को शुरू करने के लिए ऐसा डिज़ाइन महत्वपूर्ण है। हम समझते हैं कि आदत से बाहर यह मुश्किल है, लेकिन हम मानते हैं कि यह समझौता स्वीकार्य है, जो इसे प्रदान करता है। यदि आप सहमत नहीं हैं, तो मेरा सुझाव है कि आप स्वयं प्रयोग करें और कोशिश करें कि आपको यह तरीका कैसा लगा।

हम एक महीने के लिए उत्पादन हुक का उपयोग कर रहे हैं, यह देखने के लिए कि क्या नए नियम प्रोग्रामर को भ्रमित करेंगे। अभ्यास से पता चलता है कि एक व्यक्ति घंटे के एक मामले में इंटरसेप्टर के साथ महारत हासिल करता है। मैं स्वीकार करता हूं कि पहली नज़र में ये नियम मुझे विधर्मी लग रहे थे, लेकिन यह भावना जल्दी बीत गई। जब मैं पहली बार रिएक्ट से मिला, तो यही धारणा थी। (आप प्रतिक्रिया की तरह नहीं थे; और मुझे केवल दूसरी बार यह पसंद आया।)

कृपया ध्यान दें: इंटरसेप्टर के कार्यान्वयन के स्तर पर कोई जादू नहीं है। जेमी के अनुसार, उसे कुछ इस तरह मिलता है:



gist.github.com/gaearon/62866046e396f4de9b4827eae861ff19

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

( रूडी यार्डली के इस लेख में, चित्रों में सब कुछ खूबसूरती से समझाया गया है!)

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

इंटरसेप्टर प्रॉक्सी और गेटर्स से स्वतंत्र होते हैं, जो आधुनिक जावास्क्रिप्ट पुस्तकालयों में बहुत आम हैं। इसलिए, यह तर्क दिया जा सकता है कि इस तरह की समस्याओं को हल करने के लिए अन्य लोकप्रिय तरीकों की तुलना में इंटरसेप्टर्स में कम जादू है। array.push और array.pop (जिस स्थिति में कॉल का क्रम भी महत्वपूर्ण है) से अधिक नहीं!

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

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