हमारे पास प्रतिक्रिया में उपयोगस्टेट, उपयोग रेड्यूसर है जहां उनके द्वारा बनाए गए एक चर को बदलने के बाद घटक पुन: प्रस्तुत करता है। लेकिन हम useRef के साथ और बस let और const के साथ वेरिएबल भी बना सकते हैं। मैं खो गया हूं कि हमें किस मामले में useState, useReducer के साथ चर बनाने के लिए क्या करना है? जहां तक ​​​​मैं समझता हूं कि अगर हमें किसी डोम में वैरिएबल दिखाने की ज़रूरत है तो हम यूज़स्टेट और यूज़ रेड्यूसर का उपयोग करते हैं और गणना के लिए हम यूज़रेफ़ या सिर्फ रेगुलर लेट और कॉन्स्ट का उपयोग करते हैं? क्या मैं सही हूँ?

उदाहरण के लिए यदि मैं स्क्रॉलवाई का मान पढ़ता हूं, तो मुझे इसे लेट द्वारा बनाए गए चर में संग्रहीत करना चाहिए, यदि मैं इनपुट मान संग्रहीत करता हूं तो मुझे उपयोगस्टेट का उपयोग करना चाहिए?

export default function(){
    let scroll = useRef(0); // this ?
    let scroll = 0 // this ?
    let (scroll, changeScroll) = useState(0) or this // or this ?

    // scroll var
    useEffect(() => {
        window.addEventListener("scroll", () => {
            scroll = window.scrollY;
        })
        return () => {
            window.removeEventListener("scroll",() => {
                scroll = window.scrollY;
            });
        }
    }, [])
0
Eldar Tailov 10 जिंदा 2021, 10:57
अगर मैं प्रश्न को सही ढंग से समझता हूं, तो आप मूल रूप से जानना चाहते हैं कि मानक चर (const, let) का उपयोग कब करना है और रिएक्ट हुक (useRef, useState) का उपयोग कब करना है। फ़ंक्शन घटक में जानकारी संग्रहीत करें? अगर ऐसा है तो आपको रिएक्ट हुक ओवरव्यू और React Hooks API Reference के रूप में वे बताते हैं कि प्रत्येक अलग हुक का उपयोग कब करना है।
 – 
FoundingBox
10 जिंदा 2021, 11:58
प्रश्न में आपकी धारणाओं के संबंध में, मैं कहूंगा कि वे आवश्यक रूप से सत्य नहीं हैं। किसी भी प्रकार के वैरिएबल वैल्यू को JSX के हिस्से के रूप में इस्तेमाल किया जा सकता है और DOM को रेंडर किया जा सकता है, और वेरिएबल्स को स्टोर करने के लिए किसी भी अलग तरीके से कैलकुलेशन किया जा सकता है। उपरोक्त लिंक किए गए दस्तावेज़ों को पढ़ने से, आप देखेंगे कि निर्णय लेने की प्रक्रिया "घटक जीवनचक्र में इस मूल्य का उपयोग कैसे किया जाता है" पर आधारित है।
 – 
FoundingBox
10 जिंदा 2021, 12:04

1 उत्तर

सबसे बढ़िया उत्तर

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

const[text, setText]=useState('defaultText')
return (<input value={text} onChange={(e) => setText(e.target.value)} />)

वेरिएबल्स के लिए आपको जारी रखने की आवश्यकता है, आप सामान्य वैरिएबल बना सकते हैं, हर बार जब आपका कंपोनेंट रेंडर करता है तो उन्हें फिर से इनिशियलाइज़ किया जाएगा।

let temp = doSomeCalculations()
if(temp>1000)
    updateState()
doSomethingElseAndForgetAboutTemp()
    

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

दूसरी ओर, useRef, वेरिएबल को स्टोर करने के लिए नहीं माना जाता है, इसके बजाय यह आपको एक चाइल्ड कंपोनेंट के साथ सीधे इंटरैक्ट करने की क्षमता देता है, जैसे कि input या checkbox, जो इसे ऐसा दिखता है useState के लिए एक विकल्प - इनपुट मान के लिए एक राज्य चर बनाने के बजाय, आप तत्व के मान को सीधे पढ़ और सेट कर सकते हैं। हालांकि, ज्यादातर मामलों में राज्य चर का उपयोग करना बेहतर होता है, क्योंकि यह आपके कोड को अधिक पठनीय और रखरखाव योग्य बनाता है।

const[myInput]=useRef()
return (<input ref={myInput} onChange={() => console.log(myInput.current.value)} />)
1
Nadia Chibrikova 10 जिंदा 2021, 12:07