React: सिंगलटन रिएक्टर घटक

यह रिएक्ट कोर में एक बग के बजाय एक उपयोग प्रश्न की तरह दिखता है। StackOverflow जैसी साइटों पर उपयोग के सवालों का बेहतर जवाब दिया जाता है, क्योंकि हम रिएक्ट कोर में बग्स पर नज़र रखने के लिए github मुद्दों का उपयोग करने का प्रयास करते हैं। इस कारण से, मैं इस मुद्दे को बंद करने जा रहा हूं, लेकिन बेझिझक यहां बातचीत जारी रख सकता हूं या इसे स्टैकऑवरफ्लो में स्थानांतरित कर सकता हूं।

आपके प्रश्न के संबंध में, मेरी व्यक्तिगत अनुशंसा यह है कि आप एकलताओं से बचें।
http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons

उत्तर के लिए धन्यवाद।
वहाँ पहले से ही एक घटक के रूप में प्रतिक्रिया घटकों को बनाने के लिए है जिसके बारे में मुझे जानकारी नहीं है? (जब तक कि आप में से एक वरिष्ठ द्वारा मूल्यांकन नहीं किया जाता है, तब तक मुझे JSfiddle पर भरोसा नहीं है)। अगर वहाँ है, तो कृपया इसे मेरे साथ साझा करें, क्योंकि मुझे डॉक्स में इसके बारे में कुछ भी नहीं मिला।

"घटकों के बीच संवाद" डॉक्टर पृष्ठ से :

दो घटकों के बीच संचार के लिए, जिनके माता-पिता-बच्चे के संबंध नहीं हैं, आप अपना स्वयं का वैश्विक ईवेंट सिस्टम सेट कर सकते हैं।
...
फ्लक्स पैटर्न इसे व्यवस्थित करने के संभावित तरीकों में से एक है।

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

एकल एक (और केवल एक) समस्या का समाधान करते हैं।
संसाधन पर ध्यान दें।
यदि आपके पास कुछ संसाधन हैं
(1) केवल एक ही उदाहरण हो सकता है, और
(2) आपको उस एकल उदाहरण को प्रबंधित करने की आवश्यकता है,
आपको एक सिंगलटन की जरूरत है।

यह मेरे उपयोग के मामले जैसा लगता है (और प्रतिक्रिया दुनिया में कुछ और अधिक)।

मेरा मानना ​​है कि यह अभी भी GitHub पर एक मुद्दे के रूप में प्रासंगिक है क्योंकि यह घटकों का उपयोग करने के लिए एक प्रासंगिक तरीके की तरह लगता है, और मुझे लगता है कि डॉक्स को इसका संदर्भ होना चाहिए।

रिएक्ट कंपोनेंट इंस्टेंसेस में आंतरिक स्थिति होती है, जो यह जानने के लिए आवश्यक है कि एक पेड़ के अंदर वह उदाहरण कहां है। आपके पास एक ही उदाहरण कई स्थानों पर प्रदान नहीं किया जा सकता है। इसलिए सिंगलटन इंस्टेंस का विचार रिएक्ट की दुनिया में कोई मायने नहीं रखता।

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

हमारे लिए हमारे डॉक्स में इस बात का संदर्भ देते हुए, हम ऐसा नहीं करेंगे। बहुत सारे पैटर्न हैं जिन्हें रिएक्ट के साथ हासिल किया जा सकता है लेकिन हम उन सभी के बारे में बात नहीं करेंगे।

उत्तर देने के लिए समय निकालने के लिए धन्यवाद, जेम्स।
सबसे पहले, मैं आपकी बातों को पूरी तरह से समझता हूं और इस तथ्य की सराहना करता हूं कि आपने JSfiddle में एक नज़र डाली है। मुझे सिर्फ एक अंतिम वक्तव्य देना है।

1. एक "सिंगलटन" के रूप में मेरा क्या मतलब है एक रिएक्ट घटक का एक उदाहरण है जो पूरे ऐप में केवल एक बार प्रस्तुत करता है। यह मेरा शुरुआती बिंदु था। इसलिए, आपके द्वारा पहले 1 के बारे में बताई गई समस्या को अद्यतन नहीं किया जा रहा है यदि 1 से अधिक रेंडर करना इतना प्रासंगिक नहीं है।
2. मुझे पता है कि वैश्विक नाम स्थान "दूषित" है, लेकिन किसी भी कोडिंग-दृष्टिकोण के रूप में, इसकी जगह है और इसका उपयोग होता है। इस तरह की चीज़ों के लिए फ्लक्स का उपयोग करना कई कारणों से समस्याग्रस्त है (मैं एक अच्छे दिन के लिए इससे जूझता रहा) और यहां तक ​​कि अब मैं जिस समाधान के साथ आया था वह इतना अच्छा नहीं है (घटक "चुनता है" प्रॉम्प्स या बीच में दुकान)। एक सिंगलटन का उपयोग करके जिस तरह से मैंने वर्णन किया है वह इसे बहुत आसान बना सकता है । मुझे लगता है कि लाभ विपक्ष को पछाड़ देते हैं।
3. आप डॉक्स के संबंध में जानते हैं। मैं लगभग 2 महीने से रिएक्ट का उपयोग कर रहा हूं और यह कोई रहस्य नहीं है कि डॉक्स को कुछ बिंदुओं पर गंभीर कमी है। मेरे लिए, प्रतिक्रिया का उपयोग करना सीखना कठिन और भ्रमित करने वाला था।
   डॉक्स में वर्तमान में घटकों के बीच संचार के बारे में 3 वाक्य हैं जिनका "परिवार" संबंध नहीं है। मैं समझता हूं कि इस तरह की चीज़ों के लिए उपलब्ध विभिन्न प्रकार आपके लिए स्पष्ट हैं, लेकिन मैंने अभी तक फ्लक्स का सामना किया है।
   शुरुआती डॉक्स पर बहुत अधिक भरोसा करते हैं, और हो सकता है कि सभी प्रकार की समस्याओं को हल करने के लिए उपलब्ध संभावित पैटर्नों को सूचीबद्ध करना सटीक कार्य है जो आपको करना चाहिए। हम अपने आप से पैटर्न को गहराई से जान सकते हैं, यह सीखना कि कार्य के लिए कौन सा उपकरण सही है।

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

मैं हमेशा बहुत बड़ी टिप्पणियाँ लिखता हूँ .. मेरे साथ पढ़ने और पढ़ने के लिए धन्यवाद। :मुस्कुराओ:

नमस्कार @ ,

मैं एक और दृष्टिकोण जोड़कर इस बातचीत को पुनर्जीवित करना चाहूंगा। Wir ने प्रतिक्रिया दी @ 16 पोर्टल्स का उपयोग करके डोम के कुछ बिंदुओं में घटकों को माउंट करना संभव है। इस उपयोग के मामले में मैं विभिन्न घटकों जैसे मॉडल्स या सूचनाओं का निर्माण कर रहा हूं, जिन्हें एक निश्चित अन्य घटक में प्रस्तुत किया जाना चाहिए जो कि मेरे App.jsx में इस तरह माउंट है।

App.jsx

[...]
render() {
  return (<SingletonOverlay></SingletonOverlay>)
}
[...]

Notification.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import NotificationComponent from './Notification.js';
import SingletonOverlay from '../general/Overlay.js';

export default class Notification extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      element: null
    };
  }

  componentDidMount() {
    this.setState({ element: ReactDOM.findDOMNode(SingletonOverlay) });
  }

  render() {
    return this.state.element
      ? ReactDOM.createPortal(
        <NotificationComponent>That is a notification</NotificationComponent>,
        this.state.element,
      )
      : null;
  }
}

दूसरा विकल्प document.findElementById या इसी तरह के कार्यों के साथ डोमनॉड को ढूंढना होगा और उन्हें ReactDOM.findDOMNode , जिससे मुझे बहुत अप्रिय महसूस होता है क्योंकि मुझे "रिएक्ट-कॉसमॉस" छोड़ने के लिए मजबूर किया जाता है।

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

@jimfb क्या यह एक फीचर प्रस्ताव के लायक होगा?