रिएक्ट नियंत्रित घटक और अनियंत्रित घटक क्या हैं?

Question

ReactJS में नियंत्रित घटक और अनियंत्रित घटक क्या हैं? वे एक दूसरे से अलग कैसे हैं?

Comments

फिर से खोलने के लिए नामांकित। यह वास्तव में एक काफी सटीक सवाल है। निश्चित नहीं है कि इसे कितना व्यापक माना जा सकता है।

— चार्ली फूल

Answer 1

यह स्टेटफुल DOM कंपोनेंट्स (फॉर्म एलिमेंट्स) से संबंधित है और रिएक्ट डॉक्स अंतर को समझाता है:

• एक नियंत्रित घटक वह है जो propsकॉलबैक के माध्यम से परिवर्तनों के माध्यम से अपने वर्तमान मूल्य को लेता है और सूचित करता है onChange। एक अभिभावक घटक कॉलबैक को संभालकर और अपने स्वयं के राज्य का प्रबंधन करके और नियंत्रित घटक के लिए नए मानों को पारित करके इसे "नियंत्रित" करता है। आप इसे "डंबल कंपोनेंट" भी कह सकते हैं।
• एक अनियंत्रित घटक वह है जो आंतरिक रूप से अपने स्वयं के राज्य को संग्रहीत करता है, और refजब जरूरत पड़ती है तो आप इसके वर्तमान मूल्य का पता लगाने के लिए डोम का उपयोग करते हैं। यह पारंपरिक HTML की तरह थोड़ा अधिक है।

अधिकांश देशी रिएक्ट फॉर्म घटक नियंत्रित और अनियंत्रित उपयोग दोनों का समर्थन करते हैं:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

अधिकांश (या सभी) मामलों में आपको नियंत्रित घटकों का उपयोग करना चाहिए ।

Comments

के stateबजाय के माध्यम से लिया मूल्य नहीं है props?

— इवांका टोडोरोवा

@IvankaTodorova एक नियंत्रित घटक के लिए मान के माध्यम से पारित किया है props। एक अनियंत्रित घटक stateमूल्य को आंतरिक रूप से नियंत्रित करने के लिए उपयोग करेगा । यह महत्वपूर्ण अंतर है।

— आरोन बेयेल

उनके बीच का अंतर यह है कि घटक जो उनके मान को सेट / पास करते हैं और कॉलबैक होते हैं उन्हें controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) बनाम पारंपरिक HTML कहा जाता है जहां एक इनपुट तत्व अपने स्वयं के मूल्य को संभालता है और refsबुलाया uncontrolled components( <value type="text" />) के माध्यम से पढ़ा जा सकता है । नियंत्रित घटक setStateप्रॉप्स के रूप में अपने मूल घटक से प्राप्त या प्राप्त करके अपने स्वयं के राज्य का प्रबंधन कर रहे हैं ।

— १३'१

आप एक घटक को कैसे कहेंगे जो इसे defaultValueप्रॉपर के माध्यम से प्राप्त करता है, लेकिन जो नियंत्रक को सूचित करता है onBlur?

— पॉल रज़वान बर्ग

@PaRRazvanBerg एक विरोधी पैटर्न की तरह लगता है, राज्य को एक ही स्थान पर नियंत्रित किया जाना चाहिए । आमतौर पर आप राज्य को निकटतम सामान्य पूर्वजों के लिए उठाएंगे ।

— हारून बिएल

Answer 2

• नियंत्रित घटक कॉलबैक का उपयोग करके परिवर्तनों के बारे में अन्य घटकों को सूचित करते हैं। उदाहरण के लिए <Button onClick={() => console.log("clicked")}>Click</Button>:।
• अनियंत्रित घटक अपने परिवर्तनों के बारे में अन्य घटकों को सूचित नहीं करते हैं और आप केवल रेफ-एस का उपयोग करके घटक तक पहुंच सकते हैं। यदि आप HTML तत्व के वास्तविक डोम तक पहुँचने की आवश्यकता हो तो रेफ उपयोगी हो सकता है