क्या DOM में React.render () का कई बार उपयोग करना ठीक है?

Question

मैं पूरे DOM में कई बार घटकों को जोड़ने के लिए React का उपयोग करना चाहता हूं। यह फिडल दिखाता है कि मैं क्या करना चाहता हूं, और यह कोई त्रुटि नहीं है। यहाँ कोड है:

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

जे एस:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

मैंने इस प्रश्न को देखा है और मुझे डर है कि उपरोक्त कार्य करने से, मैं एक दूसरे के साथ प्रतिक्रिया करने वाले घटकों को जोखिम में डालूँगा। उस प्रश्न का उत्तर सर्वर-साइड रेंडरिंग का उपयोग करने का सुझाव देता है जो मेरे लिए कोई विकल्प नहीं है क्योंकि मैं Django सर्वर-साइड का उपयोग कर रहा हूं।

दूसरी ओर, हो सकता है कि मैं जो कर रहा हूं वह ठीक है क्योंकि मेरे पास केवल रिएक्ट लाइब्रेरी का एक उदाहरण है (जैसा कि कई घटकों के विपरीत प्रतिक्रिया का अपना उदाहरण कहते हैं)?

कई डोम का उपयोग करने का यह तरीका प्रतिक्रिया का उपयोग करने का एक ठीक तरीका है?

Answer 1

हां, React.renderएक ही पेज पर कई बार कॉल करना पूरी तरह से ठीक है । जैसा कि आपने सुझाव दिया है, रिएक्ट लाइब्रेरी केवल एक बार भरी हुई है, लेकिन प्रत्येक कॉल React.renderकिसी भी अन्य से स्वतंत्र एक नया घटक उदाहरण बनाएगी। (वास्तव में, ऐसी स्थिति उन साइटों पर असामान्य नहीं है जो रिएक्ट के लिए संक्रमण की प्रक्रिया में हैं, जहां पृष्ठ के कुछ हिस्से का उपयोग करके उत्पन्न किया जाता है React.renderऔर अन्य नहीं हैं।)

Comments

कमाल - यह एक मौजूदा Django ऐप को "सुपरचार्ज" करने में भी बेहद मददगार है। मैं एसईओ प्राप्त करने के लिए प्रदान की गई सामग्री के लिए Django का उपयोग करना चाहता हूं, और DOM तत्वों के साथ उपयोगकर्ता इंटरैक्शन के लिए रिएक्ट का उपयोग करना चाहता हूं। यह इसे प्राप्त करने के लिए सुपर सरल बनाता है।

— YPCrumble

आप शायद shouldComponentUpdate को भी देख सकते हैं और यह भविष्य में प्रदर्शन को बढ़ा सकता है (शायद आपके मामले में नहीं)। यहाँ संदर्भ है: facebook.github.io/react/docs/component-specs.html

— जिम

@YPCrumble अगर हॉपर का उत्तर सही है, तो कृपया इसे चिह्नित करें

— दाना वुडमैन

और उस मामले के बारे में क्या है जब आपके द्वारा खोले गए पेज के आधार पर ReactDOM.render()एक से अधिक घटकों को सम्मिलित divकरना है? विशेष रूप से, आपके पास प्रत्येक पृष्ठ में केवल एक ही संक्षिप्त संगृहीत app.jsसंपत्ति है <script src="app.js">। और कहा कि libs, jQuery, Bootstrap, React को लोड करता है और आपके कस्टम JS कोड और React घटक हैं। यदि आप यात्रा करते हैं /foo, तो आपके पास है ReactDOM.render(<Foo />, getElemById('content'))। यदि आप /bar', you have ReactDOM.render (<Bar />, getElemById ('सामग्री')) `पर जाएँ। वे हस्तक्षेप करते हैं। आप इसे कैसे प्रबंधित करते हैं?

— ग्रीन

@ मुझे यकीन नहीं है कि मैं समझ गया हूं, अगर घटक अलग-अलग पृष्ठों पर हैं तो वे कैसे हस्तक्षेप करेंगे? अन्यथा, प्रत्येक घटक के लिए एक नया कंटेनर तत्व क्यों न जोड़ें, जैसे:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— हॉपर

Answer 2

यह दृष्टिकोण पृष्ठ लोड प्रदर्शन के दृष्टिकोण से ठीक है, लेकिन अन्य डाउनसाइड हैं और यदि संभव हो तो कई रिएक्ट जड़ों से बचा जाना चाहिए।

• विभिन्न रिएक्ट की जड़ें संदर्भ साझा नहीं कर सकती हैं, और यदि आपको रिएक्ट जड़ों के बीच संवाद करने की आवश्यकता है, तो आपको वैश्विक डोमेन घटनाओं पर कमबैक करना होगा
• टाइम स्लाइसिंग - सस्पेंस और एसिंक्स रेंडरिंग जैसे प्रदर्शन अनुकूलन से आपको कम लाभ मिलता है । रिएक्ट रूट सीमाओं के पार निलंबित करना संभव नहीं है

अधिक छापे - https://github.com/facebook/react/issues/12700