क्रांति या दर्द? यैंडेक्स रिएक्ट हुक रिपोर्ट

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



- हुक आपके घटकों के तर्क का वर्णन करने का एक और तरीका है। यह आपको कार्यात्मक घटकों को जोड़ने की अनुमति देता है कुछ विशेषताएं जो पहले केवल कक्षाओं पर घटकों के लिए अंतर्निहित थीं।



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



संभवतः तुलना करने का सबसे आसान तरीका है। यहां सबसे सरल कोड है जो केवल कक्षाओं में एक घटक के साथ हो सकता है। घटक कुछ बदल रहा है। यह एक नियमित काउंटर है जिसे राज्य में सिर्फ एक क्षेत्र में बढ़ाया या घटाया जा सकता है। सामान्य तौर पर, मुझे लगता है कि यदि आप रिएक्ट से परिचित हैं, तो कोड आपके लिए पूरी तरह से स्पष्ट है।



एक समान घटक जो बिल्कुल एक ही कार्य करता है, लेकिन हुक में लिखा गया है, बहुत अधिक कॉम्पैक्ट दिखता है। मेरी गणना के अनुसार, औसतन, जब वर्गों पर घटकों से हुक पर घटकों के लिए पोर्टिंग होती है, तो कोड लगभग डेढ़ गुना कम हो जाता है, और यह प्रसन्न होता है।

हुक कैसे काम करता है, इसके बारे में कुछ शब्द। एक हुक एक वैश्विक फ़ंक्शन है जिसे प्रतिक्रिया के अंदर घोषित किया जाता है और हर बार एक घटक प्रदान किए जाने को कहा जाता है। रिएक्ट इन कार्यों को कॉल को ट्रैक करता है और इसके व्यवहार को बदल सकता है या यह तय कर सकता है कि उसे क्या लौटना चाहिए।



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

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



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

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

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

अगर मैं कुछ बुनियादी हुक के बारे में बात नहीं करता तो रिपोर्ट अधूरी होगी। सबसे पहले, ये राज्य प्रबंधन हुक हैं।



सबसे पहले - useState।



एक उदाहरण रिपोर्ट की शुरुआत में एक के समान है। useState एक ऐसा फंक्शन है जो एक प्रारंभिक मूल्य लेता है, और वर्तमान मान और उस मान को बदलने के लिए फ़ंक्शन से एक टपल लौटाता है। सभी जादू आंतरिक रूप से रिएक्ट द्वारा परोसा जाता है। हम या तो इस मूल्य को पढ़ सकते हैं या इसे बदल सकते हैं।

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



Redux प्रेमियों के लिए स्टेरॉयड पर इस तरह का एक उपयोग है। यह आपको reducer का उपयोग करके राज्य को लगातार बदलने की अनुमति देता है। मुझे लगता है कि जो लोग Redux से परिचित हैं वे भी नहीं समझा सकते हैं, जो अपरिचित हैं, उनके लिए मैं बताऊंगा।

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



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



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



UseEffect के पास एक उन्नत मोड है, यह तब है जब फ़ंक्शन का उपयोग करने के लिए पास किया गया है किसी अन्य फ़ंक्शन को देता है, तो यह फ़ंक्शन अगले चक्र में कहा जाएगा, जब यह उपयोग लागू किया जाएगा।

मैं उल्लेख करना भूल गया हूं, DOM के लिए लागू होने के ठीक बाद यूज़फ्रंट को एसिंक्रोनसली कहा जाता है। यही है, यह गारंटी देता है कि घटक के प्रस्तुत होने के बाद इसे निष्पादित किया जाएगा, और कुछ मानों को बदलने पर अगले रेंडर तक ले जा सकता है।



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

इसके अलावा, मैं useRef की तरह गुजरने वाले हुक में उल्लेख करूंगा, यह React.createRef के लिए एक विकल्प है, कुछ उपयोग करने के लिए समान है, लेकिन रेफरी के परिवर्तन से रेंडरिंग नहीं होती है। कभी-कभी कुछ हैक के लिए सुविधाजनक। useImperativeHandle हमें घटक पर कुछ "सार्वजनिक तरीके" घोषित करने की अनुमति देता है। यदि आप मूल घटक में उपयोग करते हैं, तो यह इन विधियों को खींच सकता है। ईमानदार होने के लिए, मैंने इसे शैक्षिक उद्देश्यों के लिए एक बार आज़माया, व्यवहार में यह उपयोगी नहीं था। यूज़ कॉन्टैक्स सिर्फ एक अच्छी बात है, यह आपको संदर्भ से वर्तमान मूल्य लेने की अनुमति देता है यदि प्रदाता ने इस मूल्य को पदानुक्रम स्तर में कहीं अधिक परिभाषित किया है।

हुक पर रिएक्ट एप्लिकेशन को ऑप्टिमाइज़ करने का एक तरीका है; यह मेमोइज़ेशन है। संस्मरण को आंतरिक और बाह्य में विभाजित किया जा सकता है। पहले बाहर के बारे में।



यह React.memo है, व्यावहारिक रूप से React.PureComponent वर्ग का एक विकल्प है, जिसने प्रॉप्स में परिवर्तन पर नज़र रखी और केवल जब प्रॉप्स या स्टेट बदले तो घटकों को बदल दिया।

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



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



एक फ़ंक्शन के लिए useMemo का एक विशेष मामला है जिसे कॉलबैक कहा जाता है। यह मुख्य रूप से इवेंट हैंडलर फ़ंक्शन के मूल्य को याद करने के लिए उपयोग किया जाता है जो कि बाल घटकों को पारित किया जाएगा ताकि इन बाल घटकों को फिर से प्रस्तुत न किया जा सके। यह बस प्रयोग किया जाता है। हम एक निश्चित फ़ंक्शन का वर्णन करते हैं, इसे useCallback में लपेटते हैं, और इंगित करते हैं कि यह किस चर पर निर्भर करता है।

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

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



चूंकि हमने कक्षाओं से छुटकारा पा लिया है, इसलिए हमें इस संदर्भ को तरीकों से बांधने की आवश्यकता नहीं है। यदि आप इन तरीकों का उपयोग कॉलबैक के रूप में करते हैं। आमतौर पर, यह एक समस्या थी, क्योंकि आपको उन्हें कंस्ट्रक्टर में बाँधने के लिए याद करना था, या संपत्ति के रूप में भाषा सिंटैक्स के अनौपचारिक विस्तार का उपयोग करना था। बहुत आम प्रचलन है। मैंने अपने डेकोरेटर का उपयोग किया, जो सिद्धांत रूप में, प्रयोगात्मक रूप से, तरीकों पर भी है।



जीवन चक्र कैसे काम करता है, इसे कैसे प्रबंधित किया जाए, इसमें अंतर है। हुक लगभग सभी जीवन चक्र क्रियाओं का उपयोग करता हैएफ़ेक्ट हुक के साथ, जो आपको एक घटक के जन्म और अद्यतन दोनों की सदस्यता लेने और उसकी मृत्यु की अनुमति देता है। कक्षाओं में, इसके लिए, हमें कई तरीकों को फिर से परिभाषित करना पड़ा, जैसे कि घटकडाइमाउंट, कंपोनेंटड्यूपडेट, और कंपोनेंटव्यूनलाउंट। इसके अलावा, shouldComponentUpdate विधि को अब React.memo से बदला जा सकता है।



राज्य कैसे संभाला जाता है, इसमें काफी कम अंतर है। सबसे पहले, कक्षाओं में एक राज्य वस्तु होती है। हमें वहां कुछ भी रटना था। हुक में, हम तार्किक स्थिति को कुछ टुकड़ों में तोड़ सकते हैं, जो हमारे लिए अलग से संचालित करना सुविधाजनक होगा।

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

हुक करने वाले वर्गों की मुख्य विशेषता नहीं है: हम राज्य परिवर्तनों की सदस्यता ले सकते हैं। यही है, हम राज्य को बदलते हैं, और तुरंत इसके परिवर्तनों की सदस्यता लेते हैं, परिवर्तन लागू होने के तुरंत बाद कुछ प्रसंस्करण करते हैं। हुक में, यह सिर्फ काम नहीं करता है। यह बहुत ही रोचक तरीके से किए जाने की जरूरत है, मैं आपको आगे बताऊंगा।

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

सामान्य तौर पर, आपको उत्तर नहीं मिलेगा कि आपको स्थानांतरित करना है या नहीं। लेकिन मैं इसे महसूस करने के लिए कम से कम नए कोड के लिए प्रयास करने की सलाह देता हूं। जब मैंने सिर्फ हुक के साथ काम करना शुरू किया, तो मैंने तुरंत कई कस्टम हुक की पहचान की, जो मेरी परियोजना के लिए खुद के लिए सुविधाजनक हैं। मूल रूप से, मैंने कुछ विशेषताओं को बदलने की कोशिश की, जिन्हें मैंने उच्च आदेश घटकों के माध्यम से लागू किया था।



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

जब कोई नया व्यक्ति वहां दिखाई देता है, तो ओब्जर्वेबल से एक मान लौटाता है। इसी तरह का एक प्रयोग BehaviourSubject से हुक देता है। ऑब्जर्वेबल से इसका अंतर यह है कि शुरू में इसका कुछ अर्थ है।

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

दो समान हुक। विंडो आकार के लिए वर्तमान वास्तविक मान का उपयोग करता है। स्क्रॉल स्थिति के लिए अगला हुक उपयोग होता है .indowScroll। मैं उनका उपयोग कुछ पॉप-अप या मोडल विंडो को पुनः प्राप्त करने के लिए करता हूं, अगर कोई जटिल चीजें हैं जो बस सीएसएस के साथ नहीं की जा सकती हैं।

और गर्म कुंजी को लागू करने के लिए ऐसा छोटा हुक, जो घटक, जब यह पृष्ठ पर मौजूद होता है, तो इसे कुछ गर्म कुंजी के लिए सदस्यता लिया जाता है। जब वह मर जाता है, एक स्वचालित सदस्यता समाप्त होती है।

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

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



दरअसल, रिपोर्ट का मुख्य लक्ष्य यह दिखाना है कि गलत तरीके से कैसे लिखना है, क्या समस्याएं हो सकती हैं और उनसे कैसे बचा जा सकता है। बहुत पहली बात, शायद जो कोई भी इन हुक का अध्ययन कर रहा है और कुछ लिखने की कोशिश कर रहा है, वह गलत तरीके से उपयोग करना है। यहां कोड के समान है, जिसमें 100% सभी ने लिखा है अगर उन्होंने हुक की कोशिश की। यह इस तथ्य के कारण है कि कंपोनेंटडाउंट के विकल्प के रूप में यूजफेक का उपयोग शुरू में मानसिक रूप से माना जाता है। लेकिन, ComponentsDidMount के विपरीत, जिसे केवल एक बार कहा जाता है, हर रेंडर पर यूज़फेक्ट को कहा जाता है। और यहां त्रुटि यह है कि यह परिवर्तन, कहते हैं, डेटा चर, और एक ही समय में इसे बदलने से घटक रेंडरर की ओर जाता है, परिणामस्वरूप, प्रभाव फिर से अनुरोध किया जाएगा। इस प्रकार, हमें सर्वर के लिए AJAX अनुरोधों की एक अंतहीन श्रृंखला मिलती है, और घटक स्वयं लगातार अपडेट, अपडेट, अपडेट करता है।



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



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



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



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

और इस मामले में, समस्या यह है कि रखरखाव के अंदर एक परिवर्तन एक ऑब्जेक्ट को फ़िल्टर ऑब्जेक्ट सहित रेंडरर तक ले जाएगा, क्योंकि फ़िल्टर ऑनचेंज की सदस्यता लेते हैं। वहाँ हम onChange फ़ंक्शन पास करते हैं, जो हर बार प्रत्येक रेंडर के साथ नया होगा। इस प्रकार, यदि HostFilters किसी तरह से जटिल है, उदाहरण के लिए, हमारे मामले में यह ड्रॉपडाउन का एक गुच्छा है, जिसमें डेटा को अंदर लोड किया जाता है। और अगर इसे एक बार फिर से प्रस्तुत किया जाएगा, तो प्रदर्शन कम हो सकता है। वहाँ होगा lags, या बस फिर से, अनुरोधों की एक अंतहीन श्रृंखला।



यहाँ, आपको निश्चित रूप से इस onChange को UseCallback में लपेटने की आवश्यकता है। हमारे मामले में, यह किसी भी चीज़ पर निर्भर नहीं करता है, इसलिए अंत में हम एक खाली सरणी का संकेत देते हैं।

, . , , . Facebook, React. , , , , '. , , confusing .



? — , - , , , , , . .

, , , , , , . , Garbage Collector , . , , , , . , , , reducer, , . , .

, , . - , , setValue - , , setState . - useEffect.

useEffect - , - , , , useEffect. useEffect , . , , Backbone, : , , , - . , , - , . - . , , , , - . , , , , , , . .

, , . , , . , . , . , , , dropdown . , . dropdown pop-up, useWindowScroll, useWindowResize , . , , — , .

, , . , , , , , . , , , , , .



, «», . , , TypeScript . . , reducer Redux , action. , action , action. , , , .

. , action. , , IncrementA 0, 1, 2, . . , , , , . action action, - . UnionType “Action”, , , action. .

— . , initialState, . , - . TypeScript. . , typeState , initialState.



reducer. State, Action, : switch action.type. TypeScript UnionType: case, - , type. action .

, : , , . .



? , . . , reducer. , action creator , , dispatch.



extension Dev Tools. . .

, , . , , . useDebugValue , - Dev Tool. useConstants, - , loaded, , , .



— . , . , . , , , . , , — - , — .

. Facebook ESLint, . , , . , dependencies . , , , .

, , , - , . , , , . . , - - .

— , , - . , , . , , - . , . . :

• «React hooks — ?» C . , , , , .
• useEffect . , , , , , . .
• «useReducer vs useState in React» , useReducer, useState. : , , , useReducer. - , useState .
• React Hooks CheatSheets c .
• . Usehooks.com — , . . react-use — , , .