उपयोग में गहराई से उपयोग करें / उपयोग में सुधार करें?

Question

मैं useEffectहुक को गहराई से समझने की कोशिश कर रहा हूं ।

मैं जानना चाहूंगा कि किस पद्धति का उपयोग कब और क्यों करना है?

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

Comments

1. माउंट और हर निर्भरता अद्यतन (किसी भी राज्य / सहारा परिवर्तन) पर बुलाया जा रहा है। 2. केवल माउंट पर कहा जाता है क्योंकि आपने निर्भरता की खाली सूची निर्दिष्ट की है। 3. माउंट पर कॉल किया गया और सूचीबद्ध निर्भरताओं में से किसी के बदलने पर

— एबोनी

दान अब्रामोव ने उपयोग के बारे में एक उत्कृष्ट ब्लॉग पोस्ट लिखा है: overreacted.io/a-complete-guide-to-useeffect । आपको इसे पढ़ना चाहिए ;-)

— रोनिका

Answer 1

useEffect(callback)

हर घटक रेंडर पर चलता है ।

आमतौर पर डिबगिंग के लिए उपयोग किया जाता है, प्रत्येक रेंडर पर फ़ंक्शन के शरीर निष्पादन के अनुरूप:

const Component = () => {
  callback()
  return <></>;
};

---

useEffect(callback,[])

चलाता है एक बार एक घटक पर माउंट।

आमतौर पर डेटा लाने आदि के द्वारा घटक की स्थिति को प्रारंभिक करने के लिए उपयोग किया जाता है।

नोट : कॉलबैक मार डाला के बाद चरण प्रस्तुत करना (ज्ञात "पकड़ लिया")।

---

useEffect(callback,[arg])

चलाता परिवर्तन पर की argमूल्य।

"परिवर्तन पर" पिछले मूल्य के साथ उथले तुलनाarg ( argपिछले रेंडर और वर्तमान एक से मूल्य की तुलना करता है) को संदर्भित करता है prevArg === arg ? Do nothing : callback()।

आमतौर पर प्रॉप्स / स्टेट चेंज पर इवेंट चलाते थे।

नोट: कई आश्रितों को प्रदान किया जा सकता है: [arg1,arg2,arg3...]

---

• useEffectडैन अब्रामोव द्वारा एक पूर्ण गाइड
• useEffectएपीआई ।
• प्रभाव हुक का उपयोग - प्रतिक्रिया डॉक्स।

Answer 2

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

1. उपयोग के साथ कोई दूसरा पैरामेंट्स नहीं: इसका उपयोग तब किया जाता है जब हम चाहते हैं कि या तो कुछ तब हो जब घटक बस घुड़सवार हो, या यदि इसे अपडेट किया गया हो। वैचारिक रूप से, हम चाहते हैं कि यह हर रेंडर के बाद हो।

2. के रूप में दूसरे पैरामेंट्स के साथ प्रयोग करें []: इसका उपयोग तब किया जाता है जब हम घटक के बढ़ते समय कुछ करना चाहते हैं, यदि केवल बढ़ते समय एक बार निष्पादित होता है। यह परिचित घटक के पास है।

3. प्रयोग करें कुछ तर्क के साथ दूसरे पैरामीटर में पारित: इसका उपयोग तब किया जाता है जब हम चाहते हैं कि उस समय कुछ हो जब प्राम्टर पास हो। आपके मामले में आर्ग बदल गए हैं।

अधिक जानकारी के लिए। यहाँ देखें: https://reactjs.org/docs/hooks-effect.html

Answer 3

3. प्रयोग कुछ तर्क के साथ दूसरे पैरामीटर में पास हुआ उपयोग () (= => {}, [arg])

यह पहले चलेगा फिर यह फिर से चलेगा अगर arg परिवर्तन

आपका यह भी पूछना भूल जाते हैं कि यूज़ेक्ट के अंदर वापसी के बारे में क्या है ... सफाई के लिए इसका उपयोग घटक के विघटन के समय चलेगा