प्रतिक्रिया के मूल की अज्ञानता, जो आपको नष्ट कर सकती है

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



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

इस लेख में मैं रिएक्ट के कुछ सिद्धांतों के बारे में बात करने की कोशिश करूंगा, जिन्हें मेरी राय में, आपको समझने की आवश्यकता है।

हम तकनीकी दृष्टिकोण से इन सिद्धांतों का विश्लेषण नहीं करेंगे। कई अन्य लेख हैं जो घटक गुणों ( props ), राज्य ( state ), संदर्भ ( context ), एक घटक की स्थिति ( setState ) और अन्य को बदलते हुए अवधारणाओं पर चर्चा करते हैं।

मैं इस बारे में बात करना चाहता हूं कि आप अधिकांश तकनीकी संचालन को क्या कहते हैं जो आप रिएक्ट के साथ करेंगे।

क्या आप तैयार हैं?

हिडन रिएक्ट प्रोसेस

पहली बात जो हर कोई रिएक्ट में सीखता है कि घटकों को कैसे बनाया जाए। मुझे यकीन है कि आपने भी यह सीखा है।

उदाहरण के लिए:

 // functional component function MyComponent() { return <div> My Functional Component </div> } // class based component class MyComponent extends React.Component { render() { return <div> My Class Component </div> } } 

आपके द्वारा बताए गए अधिकांश घटक आपको कुछ तत्व वापस करते हैं।

 function MyComponent() { return <span> My Functional Component </span> //span element } class MyComponent extends React.Component { render() { return <div> My Class Component </div> //div element } } 

अंदर से, यह प्रक्रिया इस तरह दिखती है: अधिकांश घटक तत्वों के एक पेड़ को वापस करते हैं।

आंतरिक मूल्यांकन के बाद, घटक अक्सर एक आइटम ट्री लौटाते हैं

इसके अलावा, आप शायद याद रखें कि घटक ऐसे कार्यों के रूप में काम करते हैं जो उनके props और state मूल्यों के आधार पर मूल्यों को वापस करते हैं।

घटक कुछ ऐसे हैं जैसे कि प्रॉपर और राज्य मापदंडों के साथ कार्य करते हैं

इसलिए, जब भी गुणों (गुण) और घटक की स्थिति के मूल्यों में परिवर्तन होता है, तो एक नया तत्व ट्री बनाया जाता है।

यदि प्रॉप्स या राज्य मान बदलते हैं, तो तत्व पेड़ को फिर से परिभाषित किया जाता है। नतीजतन, तत्वों का एक नया पेड़ दिखाई देता है।

यदि घटक वर्ग वंशानुक्रम पर आधारित है, तो फ़ंक्शन ट्री तत्वों का एक पेड़ देता है

 <code>render</code>. <source lang="javascript">class MyComponent extends React.Component { render() { //this function is invoked to return the tree of elements } } 

यदि घटक कार्यात्मक है, तो इसका रिटर्न वैल्यू तत्वों का एक पेड़ देता है।

 function MyComponent() { // the return value yields the tree of elements return <div> </div> } 

यह महत्वपूर्ण क्यों है?

नीचे दिखाए अनुसार <MyComponent /> कंपोनेंट को prop स्वीकार करता है।

 <MyComponent name='Ohans'/> 

इस घटक का प्रतिपादन तत्वों का एक पेड़ देता है।


आइटम ट्री <MyComponent /> को पुनः प्राप्त करने के बाद वापस आ गया

name मान में परिवर्तन होने पर क्या होता है?

 <MyComponent name='Quincy'/> 

खैर, नया तत्व पेड़ वापस आ गया है!


नया आइटम ट्री अन्य प्रॉप्स के साथ <MyComponent /> redrawing के बाद लौटा

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


दो अलग-अलग पेड़। वास्तव में क्या बदल गया है?

पेड़ पूरी तरह से नहीं बदला है, लेकिन केवल आंशिक रूप से अपडेट किया गया है (यह ज्यादातर मामलों में होता है)।

तुलना के बाद, रिएक्ट नए तत्व पेड़ में परिवर्तन को प्रतिबिंबित करने के लिए वास्तविक डोम को अपडेट करता है।

यह आसान है, है ना?

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

प्रतिक्रिया केवल आवश्यक अद्यतन, सही?

इससे पहले कि आप भी रिएक्ट के साथ काम करना शुरू कर दें, आपने अक्सर सुना है कि यह कितना शांत है, इस तथ्य सहित कि यह केवल अपडेट किए गए DOM मॉडल में महत्वपूर्ण बदलाव करता है।


रिएक्ट डॉक्स से : डोम इंस्पेक्टर अद्यतन विवरण दिखा रहा है

क्या वह सब है?

वह सब है।

हालांकि, याद रखें: DOM को अपडेट करने से पहले, React विभिन्न घटकों के लिए तत्वों का एक पेड़ बनाएगा और आवश्यक तुलना करेगा। सीधे शब्दों में कहें, तो यह पिछले आइटम ट्री और वर्तमान के बीच के अंतरों का पता लगाएगा।

मैं इसे दोहराता हूं क्योंकि नए लोगों के रिएक्ट उनके अनुप्रयोगों के प्रदर्शन में कमी को नोटिस नहीं कर सकते हैं, यह मानते हुए कि रिएक्ट केवल डोम में आवश्यक तत्वों को अपडेट करता है।

यह, ज़ाहिर है, सच है, लेकिन अधिकांश प्रतिक्रिया अनुप्रयोगों की प्रदर्शन समस्याएं DOM अपडेट से पहले ही शुरू हो जाती हैं!

अनावश्यक अद्यतन बनाम दृश्य अद्यतन

यहां तक ​​कि अगर घटक पेड़ छोटा है, तो इसके प्रतिपादन में कुछ समय लगता है (कम से कम महत्वहीन)। घटक तत्वों का पेड़ जितना बड़ा होता है, उतने ही लंबे समय तक प्रतिपादन होता है।

इसका मतलब यह है कि प्रतिक्रिया के साथ आपके आवेदन के घटकों के घटक पेड़ों को फिर से तैयार करना अनावश्यक होगा यदि यह आवश्यक नहीं है।

मैं इसे एक साधारण उदाहरण के साथ दिखाता हूं।

एक घटक संरचना के साथ एक आवेदन की कल्पना करें, जैसा कि नीचे चित्र में है।


मूल घटक ए और बच्चे के घटक बी, सी और डी के साथ आवेदन

जेनेरिक कंटेनर घटक A को एक विशिष्ट संपत्ति मिलती है। हालांकि, यह केवल इस संपत्ति को घटक D को पास करने के लिए किया जाता है D


मूल घटक A कुछ गुण प्राप्त करता है और उन्हें चाइल्ड घटक D पर भेजता है

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



जब मूल घटक को नए गुण प्राप्त होते हैं, तो प्रत्येक बच्चे को फिर से तैयार किया जाता है और एक नया पेड़ दिया जाता है।

तदनुसार, घटक B और भी फिर से प्रदान किए जाते हैं, भले ही वे बिल्कुल भी नहीं बदले हों! उन्हें कोई नया गुण प्राप्त नहीं हुआ है!

यह रिडरिंग अनावश्यक प्रतिपादन है।

इस उदाहरण में, घटकों B और C फिर से तैयार करने की आवश्यकता नहीं है, लेकिन रिएक्ट इस बात से अनजान है।

इस समस्या को हल करने के कई तरीके हैं, और मैंने उन्हें अपने हालिया लेख में बताया कि रिऐक्ट परफॉर्मेंस इश्यूज को कैसे खत्म किया जाए ।

आगे बढ़ो। नीचे दिए गए ऐप पर एक नज़र डालें।


कार्डी एक्शन में :)

मैंने इस ऐप को Carde कहा।

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


Chrome DevTools का उपयोग करके अपडेट्स के विज़ुअल डिस्प्ले (पेंट फ्लैशिंग) को सक्रिय करें

अब मैं देख सकता हूँ कि DOM में क्या अपडेट किया गया है।

यह उन वस्तुओं को चिह्नित करने का एक दृश्य तरीका है, जिन्हें DOM में अपडेट करने की आवश्यकता है। ध्यान दें कि मैं एक लाइब्रेरियन हूं ("मैं एक लाइब्रेरियन हूं।"

यह सब बहुत अच्छा है, निश्चित रूप से, लेकिन मैं तत्वों के रिएक्ट घटक पेड़ के प्रारंभिक प्रतिपादन के बारे में चिंतित हूं।

मैं इसकी जांच कर सकता हूं।


अपडेट की गई वस्तुओं को हाइलाइट करने में सक्षम करने के लिए रिएक्ट देवटूलों की जाँच करें।

अब मैं देखता हूं कि इस बटन को क्लिक करने पर कौन से घटक वास्तव में फिर से तैयार होते हैं।


उपयोगकर्ता के कार्ड के चारों ओर हरे रंग की हाइलाइटिंग पर ध्यान दें

क्या आप देखते हैं कि DOM में अद्यतन किए जाने वाले तत्वों को चिह्नित करने के लिए दृश्य तरीका कितना अलग है और रेंडरिंग अपडेट जो कि React स्वयं करता है?

रिएक्ट पूरे उपयोगकर्ता मानचित्र को फिर से बनाता है, और केवल लघु पाठ अपडेट किया जाता है।

और वह महत्वपूर्ण है।

निष्कर्ष

मुझे लगता है कि अब आपके पास इस बात का बेहतर विचार है कि रिएक्ट में आपके घटकों के साथ क्या और कैसे चल रहा है।

वास्तव में, बहुत कुछ हो रहा है जितना मैंने आपको यहां बताया है। हालाँकि, यह एक अच्छी शुरुआत है।

शांत क्षुधा बनाने के लिए आगे!

प्रतिक्रिया / Redux के साथ काम करना सीखें? यदि हां, तो मेरे पास Redux पर पुस्तकों की एक महान श्रृंखला है । कुछ लोग कहते हैं कि यह सबसे अच्छा तकनीकी साहित्य है !