रिएक्ट हूक - उपयोग चर बनाम बस चर का उपयोग कर

Question

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

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

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

मैंने हुक का उपयोग नहीं किया, और यह मुझे उसी तरह के परिणाम देगा:

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

तो क्या अंतर है? हुक का उपयोग करना उस मामले के लिए और भी जटिल है ... तो इसका उपयोग क्यों शुरू करें?

Comments

आप हालांकि 2 अलग-अलग चीजों की तुलना कर रहे हैं। हुक के साथ दूसरा फ़ंक्शन डेटा को अपडेट करने की क्षमता रखता है। पहले वाला वास्तव में कुछ नहीं कर रहा है। आप इसके साथ सिर्फ इनिशियलाइज़ कर सकते थे let a = 1; return <div>{a}</div>और आपको वही परिणाम मिलेगा।

— यति

Answer 1

कारण यह है कि यदि आप useStateदृश्य को पुन: प्रस्तुत करते हैं। चर खुद से केवल बिट्स को स्मृति में बदलते हैं और आपके ऐप की स्थिति दृश्य के साथ सिंक से बाहर निकल सकती है।

इस उदाहरण की तुलना करें:

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

दोनों मामलों aमें क्लिक पर परिवर्तन होता है, लेकिन केवल जब आप useStateदृश्य का सही उपयोग करते हैं , तो aवर्तमान मूल्य दिखाता है ।

Comments

धन्यवाद! इसलिए अगर मुझे दृश्य को प्रस्तुत करने की आवश्यकता नहीं है - केवल अपने डेटा (प्रॉप्स) को किसी सरणी में व्यवस्थित करने का एक तरीका है - मैं 'लेट' का उपयोग कर सकता हूं? मेरे लिए इसका काम करता है, मैं बस इसके ठीक और स्वीकार्य जानना चाहता हूं।

— मोशे नगर

@MosheNagar अगर आप अपने डेटा को प्रॉम्प्स से प्राप्त करते हैं, तो डेटा को राज्य में रखने के बजाय स्थानीय चर का उपयोग करने की अनुशंसा की जाती है क्योंकि घटक वैसे भी प्रोपर बदलाव पर रेंडर करेगा, इसलिए दृश्य डेटा के साथ सिंक में होगा। उन्हें राज्य में रखने से केवल अनावश्यक रेंडर किया जाएगा - पहले परिवर्तन पर, फिर राज्य परिवर्तन पर।

— मारिजेलिन

इस उत्तर को देखने का एक और तरीका यह है कि दूसरे मामले में, aयह निष्पादित होने के बाद चर को इकट्ठा किया जाएगा, जबकि पहले एक में, क्योंकि यह इसका लाभ उठाता useStateहैa

— जोओ मार्कोस ग्रिस

वह तब भी उपयोग कर सकता है useRefजब वह दृश्य को फिर से प्रस्तुत नहीं करना चाहता था। प्रश्न यह रहता है कि क्या उसे स्थानीय चर या प्रतिक्रिया के संदर्भों का उपयोग करना चाहिए। उदाहरण के लिए, यदि आपके पास कोई समयसीमा है जिसे आपको स्पष्ट करने की आवश्यकता है, या axios का उपयोग करके एक ऑन-गोइंग http अनुरोध है, तो क्या आप टाइमआउट या अक्षीय स्रोत को चर में या एक प्रतिक्रिया रेफरी में संग्रहीत करते हैं?

— टॉम

@ टॉम सामान्य नियम व्युत्पन्न राज्य के लिए स्थानीय संस्करण का उपयोग करता है। कुछ और उपयोग के लिए useRef(यदि आप रेंडरर नहीं चाहते हैं) या useState(यदि आप रेंडरर चाहते हैं)। टाइमर के मामले में, जैसा कि वे दुष्प्रभाव हैं, उन्हें useEffectहुक में शुरू किया जाना चाहिए । यदि आप timerIdकेवल सफाई उद्देश्यों के लिए चाहते हैं, तो आप इसे हैंडलर के स्थानीय चर में रख सकते हैं । यदि आप घटक में अन्य स्थान से टाइमर को खाली करने में सक्षम होना चाहते हैं, तो आपको उपयोग करना चाहिए useRef। timerIdएक घटक के स्थानीय चर में संग्रहीत करना एक गलती होगी क्योंकि स्थानीय संस्करण प्रत्येक रेंडर पर "रीसेट" होते हैं।

— Marzelin

Answer 2

अद्यतन स्थिति फिर से प्रस्तुत करने के लिए घटक बना देगा, लेकिन स्थानीय मान नहीं हैं।

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

इसलिए useStateसामान्य स्थानीय मूल्य की तुलना में इसका उपयोग करना बेहतर होगा ।

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

Answer 3

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

Answer 4

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

के बराबर है

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

क्या useStateरिटर्न दो चीजें हैं:

1. नया राज्य चर
2. उस चर के लिए सेटर

यदि आप फोन setA(1)करते हैं तो आप कॉल करते हैं this.setState({ a: 1 })और फिर से रेंडर करते हैं।

Answer 5

स्‍थानीय चर को म्यूटेशन पर हर रेंडर रीसेट हो जाएगा, जबकि राज्य अपडेट करेगा:

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}