पूर्ण उपयोग गाइड

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


लेकिन कभी-कभी, जब आप useEffect उपयोग useEffect , तो सॉफ़्टवेयर तंत्र के घटक एक साथ बहुत अच्छी तरह से फिट नहीं होते हैं। ऐसा लगता है कि आप कुछ याद कर रहे हैं। यह सब वर्ग-आधारित घटक जीवन चक्र की घटनाओं के साथ काम करने के समान है ... लेकिन क्या वास्तव में ऐसा है?
यह समझने की कोशिश करना कि वास्तव में आपको क्या पसंद नहीं है, आप ध्यान दें कि आप निम्नलिखित प्रश्न पूछ रहे हैं:

• कैसे का उपयोग करने के लिए useEffect का उपयोग useEffect ?
• उपयोग के अंदर डेटा कैसे लोड करें? [] क्या है?
• क्या कार्यों को प्रभाव निर्भरता के रूप में निर्दिष्ट करने की आवश्यकता है?
• डेटा को अनलोड करने के अंतहीन लूप में एक कार्यक्रम कभी-कभी क्यों समाप्त होता है?
• पुराने राज्य कभी-कभी प्रभाव के अंदर दिखाई देते हैं या पुराने गुण पाए जाते हैं?

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

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

मेरे सिर में, घटक-आधारित घटकों के जीवन चक्र के परिचित तरीकों के प्रिज्म के माध्यम से उपयोग करने से रोकने के बाद ही सब कुछ एक साथ हुआ।

"आपको सिखाया गया है कि आपको भूल जाना चाहिए"

habr.com/ru/company/ruvds/blog/445276/


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

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

सवालों के जवाब

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

FfHow का उपयोग करने के लिए घटकडिमाउंट का उपयोग करके उपयोग करें?

हालाँकि आप उपयोग कर सकते हैं useEffect(fn, []) componentDidMount फंक्शनलिटी खेलने के लिए, यह componentDidMount बराबर नहीं है। अर्थात्, यह CompDidMount के विपरीत, गुण और स्थिति को दर्शाता है। इसलिए, कॉलबैक के अंदर भी, आप प्रारंभिक गुण और स्थिति देखेंगे। यदि आप किसी चीज़ का नवीनतम संस्करण देखना चाहते हैं, तो आप इसे ref लिंक में लिख सकते हैं। लेकिन आमतौर पर कोड की संरचना करने का एक सरल तरीका है, इसलिए ऐसा करना वैकल्पिक है। याद रखें कि मानसिक प्रभाव मॉडल componentDidMount और अन्य घटक जीवन चक्र विधियों के लिए लागू से अलग है। इसलिए, सटीक समकक्षों को खोजने की कोशिश अच्छे से अधिक नुकसान कर सकती है। उत्पादक रूप से काम करने के लिए, आपको "प्रभावों में सोचने" की आवश्यकता है। उनके मानसिक मॉडल का आधार घटकों के जीवन चक्र में घटनाओं के जवाब की तुलना में सिंक्रनाइज़ेशन के कार्यान्वयन के करीब है।

उपयोग के अंदर डेटा को ठीक से कैसे लोड करें? [] क्या है?

यहां useEffect का उपयोग करके डेटा लोड करने पर एक अच्छा गाइड है। इसे इसकी संपूर्णता में पढ़ने का प्रयास करें! यह उतना बड़ा नहीं है। कोष्ठक, [] , एक खाली सरणी का प्रतिनिधित्व करते हैं, इसका मतलब है कि प्रभाव रिएक्ट डेटा स्ट्रीम में भाग लेने वाले मूल्यों का उपयोग नहीं करता है, और इस कारण से इसका एकल उपयोग सुरक्षित माना जा सकता है। इसके अलावा, निर्भरता के खाली सरणी का उपयोग उस घटना में त्रुटियों का एक सामान्य स्रोत है जो वास्तव में प्रभाव में एक निश्चित मूल्य का उपयोग किया जाता है। आपको कई रणनीतियों को मास्टर करने की आवश्यकता होगी (मुख्य रूप से useReducer और useCallback रूप में प्रस्तुत) जो इस निर्भरता को अनुचित रूप से छोड़ने के बजाय एक निर्भरता की आवश्यकता को समाप्त करने में मदद कर सकती है।

Depend क्या कार्यों को प्रभाव निर्भरता के रूप में निर्दिष्ट करने की आवश्यकता है?

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

End डेटा को फिर से लोड करने के अंतहीन लूप में एक कार्यक्रम कभी-कभी क्यों समाप्त होता है?

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

Or कभी-कभी पुराने राज्य प्रभाव के अंदर दिखाई देते हैं या पुराने गुण पाए जाते हैं?

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

मुझे उम्मीद है कि सवालों के ये जवाब उन लोगों के लिए उपयोगी थे जो उन्हें पढ़ते हैं। अब उपयोग के बारे में अधिक बात करते हैं।

प्रत्येक रेंडर के अपने गुण और अवस्था होती है।

इससे पहले कि हम प्रभावों पर चर्चा कर सकें, हमें प्रतिपादन के बारे में बात करनी होगी।

यहाँ कार्यात्मक काउंटर घटक है।

 function Counter() { const [count, setCount] = useState(0); return (   <div>     <p>You clicked {count} times</p>     <button onClick={() => setCount(count + 1)}>       Click me     </button>   </div> ); } 

<p>You clicked {count} times</p> । उसका क्या मतलब है? क्या राज्य में लगातार किसी भी तरह "निरीक्षण" परिवर्तन होता है और क्या यह स्वचालित रूप से अपडेट किया जाता है? इस निष्कर्ष को किसी ऐसे व्यक्ति के मूल्यवान पहले विचार के रूप में माना जा सकता है जो रिएक्ट का अध्ययन कर रहा है, लेकिन यह सही मानसिक मॉडल नहीं है कि क्या हो रहा है।

हमारे उदाहरण में, count सिर्फ एक संख्या है। यह किसी प्रकार का जादुई "डेटा बाइंडिंग" नहीं है, न कि किसी प्रकार का "ऑब्ज़र्वर ऑब्जेक्ट" या "प्रॉक्सी", या कुछ और। इससे पहले कि हम एक पुराने अच्छे नंबर हैं, जैसे:

 const count = 42; // ... <p>You clicked {count} times</p> // ... 

पहले घटक आउटपुट के दौरान, useState() से प्राप्त count मान 0. है। जब हम setCount(1) कहते हैं, तो रिएक्ट घटक को फिर से कॉल करता है। इस बार की count 1 होगी। और इतने पर:

 //     function Counter() { const count = 0; //  useState() // ... <p>You clicked {count} times</p> // ... } //       function Counter() { const count = 1; //  useState() // ... <p>You clicked {count} times</p> // ... } //        function Counter() { const count = 2; //  useState() // ... <p>You clicked {count} times</p> // ... } 

जब भी हम स्टेट को अपडेट करते हैं तो रिएक्ट घटक को कॉल करता है। नतीजतन, प्रत्येक रेंडरिंग ऑपरेशन counter स्टेट का अपना मूल्य "देखता है", जो फ़ंक्शन के अंदर एक स्थिर है।

परिणामस्वरूप, यह रेखा कोई विशेष डेटा बाइंडिंग ऑपरेशन नहीं करती है:

 <p>You clicked {count} times</p> 

यह केवल रेंडरिंग के दौरान उत्पन्न कोड में एक संख्यात्मक मान एम्बेड करता है। यह नंबर रिएक्ट द्वारा प्रदान किया गया है। जब हम setCount कहते हैं, तो रिएक्ट एक अलग count मूल्य के साथ घटक को फिर से कॉल करता है। प्रतिक्रिया तब DOM अद्यतन करता है ताकि दस्तावेज़ ऑब्जेक्ट मॉडल घटक रेंडरिंग के दौरान नवीनतम डेटा आउटपुट से मेल खाए।

इसमें से सबसे महत्वपूर्ण निष्कर्ष यह निकाला जा सकता है कि count किसी विशेष रेंडर के अंदर एक स्थिर है और समय के साथ नहीं बदलती है। बार-बार पुकारा जाने वाला घटक बदल जाता है। प्रत्येक रेंडर अपने स्वयं के count मूल्य को "देखता है", जो प्रत्येक रेंडरिंग ऑपरेशन के लिए अलग-थलग है।

इस सामग्री में आप इस प्रक्रिया के बारे में विवरण पा सकते हैं।

प्रत्येक रेंडर का अपना ईवेंट हैंडलर होता है।

सब कुछ अभी भी स्पष्ट है। घटना संचालकों के बारे में क्या?
इस उदाहरण पर एक नज़र डालें। यहां, बटन पर क्लिक करने के तीन सेकंड बाद, एक संदेश बॉक्स count में संग्रहीत मूल्य के बारे में जानकारी के साथ प्रदर्शित किया जाता है:

 function Counter() { const [count, setCount] = useState(0); function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + count);   }, 3000); } return (   <div>     <p>You clicked {count} times</p>     <button onClick={() => setCount(count + 1)}>       Click me     </button>     <button onClick={handleAlertClick}>       Show alert     </button>   </div> ); } 

मान लीजिए कि मैं क्रियाओं का निम्नलिखित क्रम करता हूं:

• मैं क्लिक Click me बटन पर Click me करके count का मान 3 तक लाऊंगा।
• Show alert बटन पर क्लिक करें।
• समय समाप्त होने से पहले मान बढ़ाकर 5 करें।

शो अलर्ट बटन पर क्लिक करने के बाद गिनती मूल्य बढ़ाना

आपको क्या लगता है कि संदेश बॉक्स में क्या दिखाई देता है? क्या 5 को वहां प्रदर्शित किया जाएगा, जो उस समय के मान को count , जिस समय टाइमर ट्रिगर किया गया था, या 3 - यानी, बटन दबाए जाने के समय की count मूल्य?

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

अगर आपने जो देखा वह आपके लिए समझ से परे है - यहाँ एक उदाहरण है जो वास्तविकता के करीब है। एक चैट एप्लिकेशन की कल्पना करें, जिसमें, संदेश ID वर्तमान प्राप्तकर्ता की ID संग्रहीत है, और एक Send बटन है। इस सामग्री में, जो कुछ भी हो रहा है उसे विस्तार से माना जाता है। वास्तव में, संदेश बॉक्स में दिखाई देने वाले प्रश्न का सही उत्तर 3 है।

जिस समय बटन क्लिक किया गया था, उस स्थिति को संदेश बॉक्स "कैप्चर" प्रदर्शित करने का तंत्र।

व्यवहार के दूसरे संस्करण को लागू करने के तरीके हैं, लेकिन अब हम सिस्टम के मानक व्यवहार से निपटेंगे। प्रौद्योगिकियों के मानसिक मॉडल का निर्माण करते समय, "आपातकालीन निकास" के सभी प्रकार से "कम से कम प्रतिरोध के मार्ग" को भेद करना महत्वपूर्ण है।

यह सब कैसे काम करता है?

हमने पहले ही कहा है कि count का मान हमारे फ़ंक्शन के लिए प्रत्येक विशिष्ट कॉल के लिए एक निरंतर है। मुझे लगता है कि इस पर अधिक विस्तार से रहने लायक है। मुद्दा यह है कि हमारे फ़ंक्शन को कई बार (प्रत्येक रेंडरिंग ऑपरेशन के लिए एक बार) कहा जाता है, लेकिन इनमें से प्रत्येक कॉल के साथ, इसके अंदर count एक स्थिर है। यह स्थिरांक कुछ विशिष्ट मूल्य (एक विशेष रेंडरिंग ऑपरेशन की स्थिति का प्रतिनिधित्व) के लिए निर्धारित है।

कार्यों का यह व्यवहार प्रतिक्रिया के लिए कुछ खास नहीं है - सामान्य कार्य समान तरीके से व्यवहार करते हैं:

 function sayHi(person) { const name = person.name; setTimeout(() => {   alert('Hello, ' + name); }, 3000); } let someone = {name: 'Dan'}; sayHi(someone); someone = {name: 'Yuzhi'}; sayHi(someone); someone = {name: 'Dominic'}; sayHi(someone); 

इस उदाहरण में, बाहरी चर someone कई बार पुन: असाइन किया गया है। यही बात रिएक्ट के अंदर कहीं हो सकती है, घटक की वर्तमान स्थिति बदल सकती है। हालाँकि, sayHi फ़ंक्शन के अंदर एक स्थानीय स्थिर name जो किसी विशेष कॉल के person के साथ जुड़ा हुआ है। यह निरंतर स्थानीय है, इसलिए विभिन्न फ़ंक्शन कॉल में इसके मान एक-दूसरे से अलग-थलग हैं! नतीजतन, समय समाप्त होने के बाद, प्रत्येक प्रदर्शित संदेश विंडो का अपना name मान "याद" होता है।

यह बताता है कि जब एक बटन क्लिक किया जाता है तो हमारा ईवेंट हैंडलर count मान को कैसे पकड़ता है। यदि हम घटकों के साथ काम करते हैं, तो समान सिद्धांत लागू करते हैं, यह पता चलता है कि प्रत्येक अपने स्वयं के count मूल्य को "देखता है":

 //     function Counter() { const count = 0; //  useState() // ... function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + count);   }, 3000); } // ... } //       function Counter() { const count = 1; //  useState() // ... function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + count);   }, 3000); } // ... } //        function Counter() { const count = 2; //  useState() // ... function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + count);   }, 3000); } // ... } 

नतीजतन, प्रत्येक रेंडर, वास्तव में, अपने स्वयं के "संस्करण" handleAlertClick । इन संस्करणों में से प्रत्येक का "अपनी count मूल्य" याद है:

 //     function Counter() { // ... function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + 0);   }, 3000); } // ... <button onClick={handleAlertClick} /> // ,   0 // ... } //       function Counter() { // ... function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + 1);   }, 3000); } // ... <button onClick={handleAlertClick} /> // ,   1 // ... } //        function Counter() { // ... function handleAlertClick() {   setTimeout(() => {     alert('You clicked on: ' + 2);   }, 3000); } // ... <button onClick={handleAlertClick} /> // ,   2 // ... } 

यही कारण है कि इस उदाहरण में, ईवेंट हैंडलर विशिष्ट रेंडरर्स से "संबंधित" हैं, और जब आप बटन पर क्लिक करते हैं, तो घटक इन रेंडरर्स से count स्टेट का उपयोग करता है।

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

यह ध्यान दिया जाना चाहिए कि उपरोक्त उदाहरण में, मैंने सीधे विशिष्ट count मानों को handleAlertClick में handleAlertClick । यह "मानसिक" प्रतिस्थापन हमें चोट नहीं पहुंचाएगा, क्योंकि किसी विशेष रेंडर के भीतर निरंतर count को नहीं बदला जा सकता है। सबसे पहले, यह एक स्थिर है, और दूसरी बात, यह एक संख्या है। हम विश्वास के साथ कह सकते हैं कि कोई अन्य अर्थों के बारे में भी सोच सकता है, जैसे कि वस्तुएं, लेकिन केवल अगर हम एक नियम के रूप में स्वीकार करते हैं कि राज्य के परिवर्तन (परिवर्तन) नहीं करें। एक ही समय में, हम मौजूदा एक को बदलने के बजाय एक नई वस्तु के साथ setSomething(newObj) को कॉल करने से संतुष्ट हैं, क्योंकि इस दृष्टिकोण के साथ पिछले रेंडर से संबंधित राज्य अछूता है।

प्रत्येक रेंडर का अपना प्रभाव होता है।

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

प्रलेखन से एक उदाहरण पर विचार करें, जो हमारे द्वारा पहले ही विश्लेषण किए गए के समान है:

 function Counter() { const [count, setCount] = useState(0); useEffect(() => {   document.title = `You clicked ${count} times`; }); return (   <div>     <p>You clicked {count} times</p>     <button onClick={() => setCount(count + 1)}>       Click me     </button>   </div> ); } 

अब मेरे पास आपके लिए एक प्रश्न है। एक प्रभाव सबसे हाल के count मूल्य को कैसे पढ़ता है?

शायद कुछ "डेटा बाइंडिंग" का उपयोग यहां किया गया है, या एक "ऑब्जर्वर ऑब्जेक्ट" जो प्रभाव फ़ंक्शन के अंदर count मूल्य को अपडेट करता है? हो सकता है कि count एक परिवर्तनशील चर है जिसका मूल्य प्रतिक्रिया हमारे घटक के अंदर सेट करता है, जिसके परिणामस्वरूप प्रभाव हमेशा अपने नवीनतम संस्करण को देखता है?

नहीं।

हम पहले से ही जानते हैं कि किसी विशेष घटक के प्रतिपादन में, count एक स्थिर है। यहां तक ​​कि ईवेंट हैंडलर भी "वैल्यू" को उस रेंडर से count जिसके लिए वे "संबंधित" हैं, इस तथ्य के कारण कि count एक निश्चित दायरे में स्थित एक स्थिर है। प्रभावों के लिए भी यही सच है!

और यह ध्यान दिया जाना चाहिए कि यह वैरिएबल count जो किसी भी तरह "अपरिवर्तित" प्रभाव के अंदर बदलता है। हमसे पहले प्रभाव का कार्य है, जो प्रत्येक रेंडरिंग ऑपरेशन में अलग है।

प्रत्येक संस्करण "देखता है" कि यह "संबंधित" से प्रस्तुत करने के लिए count मूल्य:

 //     function Counter() { // ... useEffect(   //        () => {     document.title = `You clicked ${0} times`;   } ); // ... } //       function Counter() { // ... useEffect(   //        () => {     document.title = `You clicked ${1} times`;   } ); // ... } //        function Counter() { // ... useEffect(   //        () => {     document.title = `You clicked ${2} times`;   } ); // .. } 

React , DOM .

, ( ), , , , «» , «».

, , .

, ( , ). , , , .

, , :

React:

• , 0.

:

• : <p>You clicked 0 times</p> .
• , , : () => { document.title = 'You clicked 0 times' } .

React:

• . . , , - DOM.

:

• , .

React:

• , , .
• () => { document.title = 'You clicked 0 times' } .

, . , , - :

:

• , React, 1.

React:

• , 1.

:

• : <p>You clicked 1 times</p> .
• , , : () => { document.title = 'You clicked 1 times' } .

React:

• . . , , - DOM.

:

• , .

React:

• , , .
• () => { document.title = 'You clicked 1 times' } .

…

, , , , «» .

. :

 function Counter() { const [count, setCount] = useState(0); useEffect(() => {   setTimeout(() => {     console.log(`You clicked ${count} times`);   }, 3000); }); return (   <div>     <p>You clicked {count} times</p>     <button onClick={() => setCount(count + 1)}>       Click me     </button>   </div> ); } 

, ?

, . , , , . ! , , , , , count . .




: «, ! ?».

, , this.setState , , . , , , , , :

   componentDidUpdate() {   setTimeout(() => {     console.log(`You clicked ${this.state.count} times`);   }, 3000); } 

, this.state.count count , , . , , , 5 , 5 .




, JavaScript-, , , , , setTimeout , . , (React this.state , ), .

— , , «» , . , , , . , , . , , , , , , .

, ( , , - API ) , .

:

 function Example(props) { useEffect(() => {   setTimeout(() => {     console.log(props.counter);   }, 1000); }); // ... } function Example(props) { const counter = props.counter; useEffect(() => {   setTimeout(() => {     console.log(counter);   }, 1000); }); // ... } 

, «» . ! . , .

, , - , , , , . , ref , .

, , , , , . , ( ), «» React-. , , . , .

, , , :

 function Example() { const [count, setCount] = useState(0); const latestCount = useRef(count); useEffect(() => {   //        count   latestCount.current = count;   setTimeout(() => {     //            console.log(`You clicked ${latestCount.current} times`);   }, 3000); }); // ... 

- React . React this.state . , , latestCount.current . , . , , , .

?

, . , , «» .

:

 useEffect(() => {   ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);   return () => {     ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);   }; }); 

, props — {id: 10} , {id: 20} — . , :

• React {id: 10} .
• React {id: 20} .
• React {id: 20} .

( , , .)

, «» - , , «» - , . — , , , . .

React , . , . . . :

• React {id: 20} .
• . {id: 20} .
• React {id: 10} .
• React {id: 20} .

, «» props , {id: 10} , , props {id: 20} .

, …


— ?

: « ( , , - API ) , ».

! « » , . , , :

 //  ,  props  {id: 10} function Example() { // ... useEffect(   //       () => {     ChatAPI.subscribeToFriendStatus(10, handleStatusChange);     //           return () => {       ChatAPI.unsubscribeFromFriendStatus(10, handleStatusChange);     };   } ); // ... } //  ,  props  {id: 20} function Example() { // ... useEffect(   //       () => {     ChatAPI.subscribeToFriendStatus(20, handleStatusChange);     //           return () => {       ChatAPI.unsubscribeFromFriendStatus(20, handleStatusChange);     };   } ); // ... } 

, , … , «» , -, {id: 10} .

React . , , . props , .

,

React , . .

, :

 function Greeting({ name }) { return (   <h1 className="Greeting">     Hello, {name}   </h1> ); } 

, <Greeting name="Dan" /> , — <Greeting name="Yuzhi" /> , <Greeting name="Yuzhi" /> . Hello, Yuzhi .

, , . React, . , , . $.addClass $.removeClass jQuery- ( — , «»), , CSS- React ( — , «»).

React DOM , . «» «».

. useEffect , React, .

 function Greeting({ name }) { useEffect(() => {   document.title = 'Hello, ' + name; }); return (   <h1 className="Greeting">     Hello, {name}   </h1> ); } 

useEffect , , . , - , ! , «», «».

, A , B , — C , , C . (, - ), .

, , , . ( ).

?

React

React DOM. DOM , React DOM, - .

, :

 <h1 className="Greeting"> Hello, Dan </h1> 

:

 <h1 className="Greeting"> Hello, Yuzhi </h1> 

React :

 const oldProps = {className: 'Greeting', children: 'Hello, Dan'}; const newProps = {className: 'Greeting', children: 'Hello, Yuzhi'}; 

React , children , DOM. , className . :

 domNode.innerText = 'Hello, Yuzhi'; // domNode.className    

- ? , , .

, , - :

 function Greeting({ name }) { const [counter, setCounter] = useState(0); useEffect(() => {   document.title = 'Hello, ' + name; }); return (   <h1 className="Greeting">     Hello, {name}     <button onClick={() => setCounter(counter + 1)}>       Increment     </button>   </h1> ); } 

counter . document.title name , name . document.title counter , .

React … ?

 let oldEffect = () => { document.title = 'Hello, Dan'; }; let newEffect = () => { document.title = 'Hello, Dan'; }; //   React  ,        ? 

— . React , , . ( . name .)

, , ( deps ), useEffect :

   useEffect(() => {   document.title = 'Hello, ' + name; }, [name]); //   

, React: «, , , , name ».

, , React :

 const oldEffect = () => { document.title = 'Hello, Dan'; }; const oldDeps = ['Dan']; const newEffect = () => { document.title = 'Hello, Dan'; }; const newDeps = ['Dan']; // React     ,     . //      ,     . 

, , ! - - .

React

React — . , , , , useEffect , , , . ( !)

 function SearchResults() { async function fetchData() {   // ... } useEffect(() => {   fetchData(); }, []); //   ?  .      . // ... } 

FAQ , . .

« !», — . : , , . , , , — , .

, , . , , , , . , . .

, , .

, React

, , React , .

   useEffect(() => {   document.title = 'Hello, ' + name; }, [name]); 

—

, , , [] , , , , :

   useEffect(() => {   document.title = 'Hello, ' + name; }, []); // :    name 

—

. , «» , , .

, , , . , : « setInterval clearInterval ». . , , , useEffect , , , [] . - , ?

 function Counter() { const [count, setCount] = useState(0); useEffect(() => {   const id = setInterval(() => {     setCount(count + 1);   }, 1000);   return () => clearInterval(id); }, []); return <h1>{count}</h1>; } 

, , .

, « , », . , , , setInterval , . , ?

, — React , , . , count , React , , , . — .

count 0. setCount(count + 1) setCount(0 + 1) . , — [] , setCount(0 + 1) :

 //  ,   0 function Counter() { // ... useEffect(   //       () => {     const id = setInterval(() => {       setCount(0 + 1); //  setCount(1)     }, 1000);     return () => clearInterval(id);   },   [] //    ); // ... } //       1 function Counter() { // ... useEffect(   //     - ,    //   React  ,   .   () => {     const id = setInterval(() => {       setCount(1 + 1);     }, 1000);     return () => clearInterval(id);   },   [] ); // ... } 

React, , , — .

count — , ( ):

   const count = // ... useEffect(() => {   const id = setInterval(() => {     setCount(count + 1);   }, 1000);   return () => clearInterval(id); }, []); 

. React .


,

. , , React , , . — - .

React , . , , , .

, , , . count :

 useEffect(() => { const id = setInterval(() => {   setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); 

. , , — , . count , count , setCount(count + 1) :

 //  ,   0 function Counter() { // ... useEffect(   //       () => {     const id = setInterval(() => {       setCount(0 + 1); // setCount(count + 1)     }, 1000);     return () => clearInterval(id);   },   [0] // [count] ); // ... } //  ,   1 function Counter() { // ... useEffect(   //       () => {     const id = setInterval(() => {       setCount(1 + 1); // setCount(count + 1)     }, 1000);     return () => clearInterval(id);   },   [1] // [count] ); // ... } 

, setInterval , count , . , .


,

, , , . — , .

.

, count .

 useEffect(() => {   const id = setInterval(() => {     setCount(count + 1);   }, 1000);   return () => clearInterval(id); }, [count]); 

, , count . , count setCount . , , count . , , setState :

   useEffect(() => {   const id = setInterval(() => {     setCount(c => c + 1);   }, 1000);   return () => clearInterval(id); }, []); 

« ». , count - , setCount(count + 1) . count - , count + 1 «» React. React count . , React — , , , .

setCount(c => c + 1) . « React », , . « » , , .

, , , . React. count :


,

.

, setInterval , , c => c + 1 . count . React .

Google Docs

, , — ? , , «», , . , Google Docs . . , .

, . . , setCount(c => c + 1) , , setCount(count + 1) , «» count . , ( — «»). « React» — . .

( ) , Google Docs . — , React . , , ( , , ) .

, setCount(c => c + 1) , . , . , , , , , . setCount(c => c + 1) . useReducer .

, : count step . setInterval , step :

 function Counter() { const [count, setCount] = useState(0); const [step, setStep] = useState(1); useEffect(() => {   const id = setInterval(() => {     setCount(c => c + step);   }, 1000);   return () => clearInterval(id); }, [step]); return (   <>     <h1>{count}</h1>     <input value={step} onChange={e => setStep(Number(e.target.value))} />   </> ); } 

.

, React . step , . .

: step setInterval — step . , , , ! , , , , , .

, , , setInterval , step . step ?

, , useReducer .

, setSomething(something => ...) , , . «», , , .

step dispatch :

 const [state, dispatch] = useReducer(reducer, initialState); const { count, step } = state; useEffect(() => { const id = setInterval(() => {   dispatch({ type: 'tick' }); //  setCount(c => c + step); }, 1000); return () => clearInterval(id); }, [dispatch]); 

.

: « , ?». , React , dispatch . .

!

( dispatch setstate useRef , React , . — .)

, , , , . step . , . , . :

 const initialState = { count: 0, step: 1, }; function reducer(state, action) { const { count, step } = state; if (action.type === 'tick') {   return { count: count + step, step }; } else if (action.type === 'step') {   return { count, step: action.step }; } else {   throw new Error(); } } 

, , , .

useReducer — -

, , , . , , ? , , API <Counter step={1} /> . , props.step ?

, ! , :

 function Counter({ step }) { const [count, dispatch] = useReducer(reducer, 0); function reducer(state, action) {   if (action.type === 'tick') {     return state + step;   } else {     throw new Error();   } } useEffect(() => {   const id = setInterval(() => {     dispatch({ type: 'tick' });   }, 1000);   return () => clearInterval(id); }, [dispatch]); return <h1>{count}</h1>; } 

, . , , , , . .

dispatch . , , . .

, , . «» , , ? , dispatch , React . . .

useReducer «-» . , . , , , , .

, - , .

, , , :

 function SearchResults() { const [data, setData] = useState({ hits: [] }); async function fetchData() {   const result = await axios(     'https://hn.algolia.com/api/v1/search?query=react',   );   setData(result.data); } useEffect(() => {   fetchData(); }, []); //   ? // ... 

, .

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

, , , , :

 function SearchResults() { // ,       function getFetchUrl() {   return 'https://hn.algolia.com/api/v1/search?query=react'; } // ,        async function fetchData() {   const result = await axios(getFetchUrl());   setData(result.data); } useEffect(() => {   fetchData(); }, []); // ... } 

, , :

 function SearchResults() { const [query, setQuery] = useState('react'); // ,       function getFetchUrl() {   return 'https://hn.algolia.com/api/v1/search?query=' + query; } // ,        async function fetchData() {   const result = await axios(getFetchUrl());   setData(result.data); } useEffect(() => {   fetchData(); }, []); // ... } 

, (, ), . .

, . , :

 function SearchResults() { // ... useEffect(() => {   //      !   function getFetchUrl() {     return 'https://hn.algolia.com/api/v1/search?query=react';   }   async function fetchData() {     const result = await axios(getFetchUrl());     setData(result.data);   }   fetchData(); }, []); //    . // ... } 

.

? , « ». React, - .

getFetchUrl , query , , , , . — , query :

 function SearchResults() { const [query, setQuery] = useState('react'); useEffect(() => {   function getFetchUrl() {     return 'https://hn.algolia.com/api/v1/search?query=' + query;   }   async function fetchData() {     const result = await axios(getFetchUrl());     setData(result.data);   }   fetchData(); }, [query]); //    . // ... } 

.

, « React». query . , , , , . , , .

exhaustive-deps eslint-plugin-react-hooks , . , , .




.

, ?

. , , . , , .

? , . : React . . , « ». , , . , , , !

, , . , getFetchUrl :

 function SearchResults() { function getFetchUrl(query) {   return 'https://hn.algolia.com/api/v1/search?query=' + query; } useEffect(() => {   const url = getFetchUrl('react');   // ...    -   ... }, []); //  : getFetchUrl useEffect(() => {   const url = getFetchUrl('redux');   // ...    -   ... }, []); //  : getFetchUrl // ... } 

getFetchUrl — , .

, «» , . getFetchUrl (, , ), :

 function SearchResults() { //       function getFetchUrl(query) {   return 'https://hn.algolia.com/api/v1/search?query=' + query; } useEffect(() => {   const url = getFetchUrl('react');   // ...    -    ... }, [getFetchUrl]); //   ,     . useEffect(() => {   const url = getFetchUrl('redux');   // ...    -   ... }, [getFetchUrl]); //   ,     . // ... } 

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

— .

, , :

 //        function getFetchUrl(query) { return 'https://hn.algolia.com/api/v1/search?query=' + query; } function SearchResults() { useEffect(() => {   const url = getFetchUrl('react');   // ...    -   ... }, []); //     . useEffect(() => {   const url = getFetchUrl('redux');   // ...    -   ... }, []); //     . // ... } 

, . , , .

. , useCallback :

 function SearchResults() { //    ,   const getFetchUrl = useCallback((query) => {   return 'https://hn.algolia.com/api/v1/search?query=' + query; }, []);  //      . useEffect(() => {   const url = getFetchUrl('react');   // ...    -   ... }, [getFetchUrl]); //      . useEffect(() => {   const url = getFetchUrl('redux');   // ...    -   ... }, [getFetchUrl]); //       // ... } 

useCallback . : , -, , , .

, . ( 'react' 'redux' ). , , , query . , , query , getFetchUrl .

, query useCallback :

 function SearchResults() { const [query, setQuery] = useState('react'); const getFetchUrl = useCallback(() => { //   query   return 'https://hn.algolia.com/api/v1/search?query=' + query; }, []); //  : query // ... } 

useCallback query , , getFetchUrl , query :

 function SearchResults() { const [query, setQuery] = useState('react'); //      query const getFetchUrl = useCallback(() => {   return 'https://hn.algolia.com/api/v1/search?query=' + query; }, [query]);  //    . useEffect(() => {   const url = getFetchUrl();   // ...    -   ... }, [getFetchUrl]); //    . // ... } 

useCallback , query , getFetchUrl , , . query , getFetchUrl , . Excel: - , , , .

— , . , :

 function Parent() { const [query, setQuery] = useState('react'); //      query const fetchData = useCallback(() => {   const url = 'https://hn.algolia.com/api/v1/search?query=' + query;   // ...      ... }, [query]);  //       return <Child fetchData={fetchData} /> } function Child({ fetchData }) { let [data, setData] = useState(null); useEffect(() => {   fetchData().then(setData); }, [fetchData]); //       // ... } 

fetchData Parent query , Child , .

?

, , , , . , , , , :

 class Parent extends Component { state = {   query: 'react' }; fetchData = () => {   const url = 'https://hn.algolia.com/api/v1/search?query=' + this.state.query;   // ...    -   ... }; render() {   return <Child fetchData={this.fetchData} />; } } class Child extends Component { state = {   data: null }; componentDidMount() {   this.props.fetchData(); } render() {   // ... } } 

, : « , , , useEffect — componentDidMount componentDidUpdate . !». componentDidUpdate :

 class Child extends Component { state = {   data: null }; componentDidMount() {   this.props.fetchData(); } componentDidUpdate(prevProps) {   //         if (this.props.fetchData !== prevProps.fetchData) {     this.props.fetchData();   } } render() {   // ... } } 

, fetchData — ! (, , , .) - , . this.props.fetchData prevProps.fetchData . , , ?

   componentDidUpdate(prevProps) {   this.props.fetchData(); } 

. . ( .) , fetchData this.state.query ?

   render() {   return <Child fetchData={this.fetchData.bind(this, this.state.query)} />; } 

this.props.fetchData !== prevProps.fetchData true , , query ! .

, , , query Child . , , query , query :

 class Parent extends Component { state = {   query: 'react' }; fetchData = () => {   const url = 'https://hn.algolia.com/api/v1/search?query=' + this.state.query;   // ...    -    ... }; render() {   return <Child fetchData={this.fetchData} query={this.state.query} />; } } class Child extends Component { state = {   data: null }; componentDidMount() {   this.props.fetchData(); } componentDidUpdate(prevProps) {   if (this.props.query !== prevProps.query) {     this.props.fetchData();   } } render() {   // ... } } 

, , - , , .

, , . this , . , , , , - . , this.props.fetchData , , , , , .

- useCallback . , , , . , . useCallback props.fetchData .

, useMemo :

 function ColorPicker() { //         Child, //       . const [color, setColor] = useState('pink'); const style = useMemo(() => ({ color }), [color]); return <Child style={style} />; } 

, useCallback , - . « », , , . , . , .

, fetchData ( ), . , , . (« props.onComplete , ?») , .

, :

 class Article extends Component { state = {   article: null }; componentDidMount() {   this.fetchData(this.props.id); } async fetchData(id) {   const article = await API.fetchArticle(id);   this.setState({ article }); } // ... } 

, , , . . — , :

 class Article extends Component { state = {   article: null }; componentDidMount() {   this.fetchData(this.props.id); } componentDidUpdate(prevProps) {   if (prevProps.id !== this.props.id) {     this.fetchData(this.props.id);   } } async fetchData(id) {   const article = await API.fetchArticle(id);   this.setState({ article }); } // ... } 

, , , . , . , {id: 10} , {id: 20} , , . , , , . और यह गलत है।

, , . — , , async/await ( , - ) , ( , ).

, async -. (, , , , .)

, , ! .

, :

 function Article({ id }) { const [article, setArticle] = useState(null); useEffect(() => {   let didCancel = false;   async function fetchData() {     const article = await API.fetchArticle(id);     if (!didCancel) {       setArticle(article);     }   }   fetchData();   return () => {     didCancel = true;   }; }, [id]); // ... } 

, , , . , .

, , , , , . , , , . . — .

useEffect , , , . React. , useEffect .

, , « », . . , , , , «» , .

, useEffect , . — . — , , — , . , , , , API.

, , useFetch , , useTheme , . , , useEffect . , , , .

, , useEffect . — , . , . ?

Suspense React , , - ( : , , ) .

Suspense , , useEffect , , , - . , , , . , , , , .

परिणाम

, . , , - , , , .