रिएक्ट जेएस में "माउंटिंग" क्या है?


128

मैं ReactJS सीखते हुए कई बार "माउंट" शब्द सुन रहा हूं। और इस शब्द के बारे में जीवनचक्र के तरीके और त्रुटियाँ प्रतीत होती हैं। बढ़ते हुए वास्तव में रिएक्ट का क्या मतलब है?

उदाहरण: componentDidMount() and componentWillMount()

जवाबों:


138

रिएक्ट का मुख्य काम यह पता लगाना है कि स्क्रीन पर घटकों को प्रस्तुत करने के लिए डोम को कैसे संशोधित किया जाए।

रिएक्ट "बढ़ते" (डोम में नोड्स जोड़कर), "अनमाउंटिंग" (उन्हें डोम से हटाकर), और "अपडेट" (डोम में पहले से ही नोड्स में बदलाव करते हुए) करता है।

एक प्रतिक्रिया नोड को DOM नोड के रूप में कैसे दर्शाया जाता है और यह DOM ट्री में कहां और कब प्रकट होता है इसका प्रबंधन शीर्ष-स्तरीय API द्वारा किया जाता है । क्या हो रहा है इसके बारे में बेहतर विचार प्राप्त करने के लिए, संभव सबसे सरल उदाहरण देखें:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

तो क्या है fooऔर आप इसके साथ क्या कर सकते हैं? fooफिलहाल, एक सादा जावास्क्रिप्ट ऑब्जेक्ट है जो लगभग इसी तरह दिखता है (सरलीकृत):

{
  type: FooComponent,
  props: {}
}

यह वर्तमान में पृष्ठ पर कहीं भी नहीं है, अर्थात यह एक DOM तत्व नहीं है, DOM ट्री में कहीं भी मौजूद नहीं है और, React एलिमेंट नोड से अलग होने पर, दस्तावेज़ में कोई अन्य सार्थक प्रतिनिधित्व नहीं है। यह सिर्फ प्रतिक्रिया क्या कहता है की जरूरत है स्क्रीन पर होना करने के लिए करता है, तो यह प्रतिक्रिया तत्व प्रदान की गई हो जाता है।यह अभी तक "माउंटेड" नहीं है।

आप प्रतिक्रिया करके इसे कॉल करके DOM कंटेनर में "माउंट" कर सकते हैं:

ReactDOM.render(foo, domContainer);

यह प्रतिक्रिया देता है कि यह fooपृष्ठ पर दिखाने का समय है । प्रतिक्रिया FooComponentकक्षा का एक उदाहरण बनाएगी और इसकी renderविधि कहेगी। मान लीजिए कि यह एक प्रतिपादन करता है <div />, उस स्थिति में प्रतिक्रिया इसके लिए एक divDOM नोड बनाएगी , और इसे DOM कंटेनर में डालेंगी।

प्रतिक्रिया घटकों के लिए इंस्टेंसेस और DOM नोड्स बनाने और DOM में सम्मिलित करने की इस प्रक्रिया को माउंटिंग कहा जाता है।

ध्यान दें कि आम तौर पर आप केवल ReactDOM.render()रूट कंपोनेंट को माउंट करने के लिए कॉल करेंगे। आपको बच्चे के घटकों को मैन्युअल रूप से "माउंट" करने की आवश्यकता नहीं है। जब भी कोई अभिभावक घटक कॉल करता है setState(), और उसकी renderविधि कहती है कि किसी विशेष बच्चे को पहली बार प्रस्तुत किया जाना चाहिए, तो रिएक्ट स्वतः ही इस बच्चे को उसके माता-पिता में "माउंट" कर देगा।


9
मैं यह बताना चाहूंगा कि जब आप कॉल React.createElement(FooComponent)करते हैं तो आप इसका उदाहरण नहीं बना रहे हैं FooComponent। एक रिएक्ट तत्व के रूप में जाना जाने fooवाला एक आभासी डोम प्रतिनिधित्व है FooComponent। लेकिन हो सकता है कि FooComponentरिएक्ट टाइप से आपका यही मतलब हो । भले ही, आप रिएक्ट में घटकों को माउंट नहीं करते हैं, आप प्रस्तुत करते हैं जो बदले में घटक को माउंट कर सकते हैं यदि डोम ट्री में घटक का प्रतिनिधित्व करने के लिए वास्तविक डोम नोड बनाने की आवश्यकता होती है। वास्तविक माउंटिंग वह घटना है जिस पर यह पहली बार होता है।
जॉन Leidegren

5
माउंटिंग नोड को रिएक्ट कंपोनेंट इंस्टेंस अटैच करने के लिए माउंटिंग संदर्भित करता है जो बाद में रेंडर कॉल पर पेड़ को अलग करने / वृद्धिशील रेंडर अपडेट करने के लिए आवश्यक है।
जॉन लीडग्रेन 5

3
मैंने इस उत्तर को संपादित करने की स्वतंत्रता ली क्योंकि यह पहले से ही स्वीकृत है लेकिन इसमें काफी गलतफहमी थी (जैसे आप findDOMNodeरिएक्ट तत्वों पर नहीं चल सकते )।
दान अब्रामोव

1
@Rahamin अनमाउंटिंग तब होती है जब घटक को हटा दिया जाता है / बदल दिया जाता है, यदि आप दृश्यों के बीच इस तरह से नेविगेट करते हैं कि कोई रेंडरिंग नहीं है तो आप अनमाउंट सिग्नल की गारंटी नहीं देते हैं। कंपोनेंटविल यूमाउंट पेज अनलोड के समान नहीं है।
जॉन लेडिग्रेन

1
@Yossi यहाँ स्पष्ट रूप से बढ़ते और का एक उदाहरण है संयुक्त राष्ट्र : टेस्ट स्वीट में एक घटक के बढ़ते stackoverflow.com/a/55359234/6225838
CPHPython

38

प्रतिक्रिया एक समद्विबाहु / सार्वभौमिक ढांचा है। इसका अर्थ है कि UI घटक ट्री का एक आभासी प्रतिनिधित्व है, और यह उस ब्राउज़र में आउटपुट होने वाले वास्तविक रेंडरिंग से अलग है। प्रलेखन से:

प्रतिक्रिया इतनी तेज़ है क्योंकि यह कभी भी DOM से सीधे बात नहीं करती है। प्रतिक्रिया डोम की एक तेज इन-मेमोरी प्रतिनिधित्व रखता है।

हालाँकि, कि इन-मेमोरी प्रतिनिधित्व सीधे ब्राउज़र में DOM से जुड़ा नहीं होता है (भले ही इसे Virtual DOM कहा जाता है, जो एक सार्वभौमिक ऐप फ्रेमवर्क के लिए एक दुर्भाग्यपूर्ण और भ्रमित करने वाला नाम है ), और यह केवल DOM जैसा डेटा है- संरचना जो सभी UI घटकों को पदानुक्रम और अतिरिक्त मेटा-डेटा का प्रतिनिधित्व करती है। वर्चुअल डोम सिर्फ एक कार्यान्वयन विवरण है।

"हमें लगता है कि रिएक्ट की वास्तविक नींव बस घटकों और तत्वों के विचार हैं: यह वर्णन करने में सक्षम होने के लिए कि आप एक घोषणात्मक तरीके से क्या प्रस्तुत करना चाहते हैं। ये सभी अलग-अलग पैकेजों द्वारा साझा किए गए टुकड़े हैं। रिएक्ट के कुछ हिस्सों को कुछ प्रतिपादन के लिए विशिष्ट। जब हम रिएक्ट के बारे में सोचते हैं तो लक्ष्य आमतौर पर ऐसा नहीं होता है। " - रिएक्ट जेएस ब्लॉग

तो, निष्कर्ष यह है कि रिएक्ट रेंडरिंग एग्नॉस्टिक है , जिसका अर्थ है कि यह अंतिम आउटपुट क्या है, इसकी परवाह नहीं करता है। यह ब्राउज़र में DOM ट्री हो सकता है, यह XML, Native Components या JSON हो सकता है।

"जैसा कि हम प्रतिक्रिया-मूल, प्रतिक्रिया-कला, प्रतिक्रिया-कैनवास और प्रतिक्रिया-तीन जैसे पैकेजों को देखते हैं, यह स्पष्ट हो जाता है कि रिएक्ट की सुंदरता और सार का ब्राउज़र या डोम के साथ कोई लेना-देना नहीं है।" - रिएक्ट जेएस ब्लॉग

अब, जब आप जानते हैं कि रिएक्ट कैसे काम करता है, तो आपके प्रश्न का उत्तर देना आसान है :)

माउंटिंग अंतिम यूआई प्रतिनिधित्व (जैसे डोम या मूल घटक) में एक घटक के आभासी प्रतिनिधित्व को आउटपुट करने की प्रक्रिया है।

एक ब्राउज़र में इसका मतलब होगा कि DOM ट्री में एक वास्तविक DOM तत्व (जैसे HTML div या li element) में एक रिएक्ट एलिमेंट को आउटपुट करना । एक मूल अनुप्रयोग में एक देशी घटक में प्रतिक्रियाशील तत्व के आउटपुट का मतलब होगा। यदि आप हिम्मत रखते हैं तो आप JSON या XML या XAML में अपने रेंडरर और आउटपुट रिएक्ट घटक भी लिख सकते हैं।

इसलिए, बढ़ते / अनमाउंटिंग हैंडलर एक रिएक्ट एप्लिकेशन के लिए महत्वपूर्ण हैं, क्योंकि आप केवल यह सुनिश्चित कर सकते हैं कि एक घटक आउटपुट / रेंडर किया गया है जब यह माउंट किया गया हो । हालाँकि, componentDidMountहैंडलर केवल तब ही लागू किया जाता है जब वास्तविक UI प्रतिनिधित्व (DOM या नेटिव कंपोनेंट्स) को रेंडर किया जाता है, लेकिन यदि आप सर्वर पर HTML स्ट्रिंग का उपयोग कर रहे हैं, तो नहींrenderToString , जो समझ में आता है, क्योंकि घटक वास्तव में तब तक माउंट नहीं किया जाता है जब तक कि यह पहुंच नहीं जाता है। ब्राउज़र और इसमें निष्पादित।

और, हाँ, यदि आप मुझसे पूछें तो माउंटिंग भी एक दुर्भाग्यपूर्ण / भ्रामक नाम है। IMHO componentDidRenderऔर componentWillRenderबेहतर नाम होंगे।


6
किसी और ने मुझे एक और मंच से इस उत्तर की ओर इशारा किया। मुझे नहीं लगता कि इसके componentDidRenderलिए एक विकल्प है componentDidMountक्योंकि घटक कई बार प्रस्तुत कर सकता है जब प्रॉप्स एक बार माउंट होने के बाद बदल जाता है।
गौरव

@TheMinister इसे "वर्चुअल DOM" लाइब्रेरी कहा जाता था क्योंकि यह आइसोमॉर्फिक के रूप में शुरू नहीं हुआ था, लेकिन वास्तव में शुरू से ही डोम से जुड़ा हुआ था। इसे आइसोमॉर्फिक बनाने के लिए एक बाद में किया गया था।
इसियाह मीडोज

तो, माउंट सौंपनेवाला के साथ विनिमेय है ? उस मामले में, क्या यह सच है कि निम्नलिखित काल्पनिक में से प्रत्येक के लिए एक घटक घुड़सवार / प्रदान किया जाता है ?: (id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...)
कोडी

1
Link to / प्रतिक्रिया-js-the-king-of-
Universal

मैंने टूटी हुई लिंक को हटाने के लिए पोस्ट को दो बार संपादित किया /react-js-the-king-of-universal-apps/( संपादित-टिप्पणियों के साथ स्पष्ट रूप से उल्लेख किया गया है कि यह एक टूटी हुई लिंक है ), लेकिन साथियों ने दोनों बार संपादन को अस्वीकार कर दिया है । क्या कोई मुझे मार्गदर्शन दे सकता है कि एक उत्तर को संपादित करने और एक टूटी हुई कड़ी को हटाने में क्या गलत है?
आदित्य शर्मा

12

माउंटिंग से तात्पर्य घटक के रिएक्ट में निर्मित (डीओएम नोड्स) दस्तावेज के कुछ भाग से जुड़ा होना है। बस!

प्रतिक्रिया को अनदेखा करते हुए आप इन दो मूल कार्यों को बढ़ते हुए सोच सकते हैं:

replaceChild

अपेंड चाइल्ड

आंतरिक रूप से माउंट करने के लिए रिएक्ट का उपयोग करने वाले सबसे आम कार्यों की संभावना है।

सोच:

घटक-माउंट === पहले-माउंट

तथा:

घटकडाउनमाउंट === आफ्टर-माउंट


यदि माउंटिंग समान है appendChild, तो क्या है render?
डीके

मुझे लगता है कि आप कह सकते हैं renderकि वास्तविक तरीका है जो खुद ही बढ़ते हैं। तो componentWillMount== से पहले, render== componentDidMountमाउंट सम्मिलन करता है, और = = माउंट के बाद (या renderघटक को सम्मिलित करने के लिए एक डोम एपीआई को बुलाया है और उस अतुल्यकालिक ऑपरेशन पूरी तरह से पूरा हो गया है)
रोब

8

https://facebook.github.io/react/docs/tutorial.html

यहाँ, ComponentsDidMount एक विधि है जिसे प्रतिक्रिया द्वारा स्वचालित रूप से बुलाया जाता है जब एक घटक प्रदान किया जाता है।

अवधारणा यह है कि आप ReactJS को बता रहे हैं, "कृपया इस बात को, इस टिप्पणी बॉक्स या कताई छवि या जो कुछ भी मैं चाहता हूं, उसे ब्राउज़र पृष्ठ पर ले जाएं, और आगे बढ़ें और वास्तव में इसे ब्राउज़र पृष्ठ पर डाल दें। जब ऐसा हो जाए, तो कॉल करें। मेरा कार्य जो मैं करने के लिए बाध्य componentDidMountहूं, मैं आगे बढ़ सकता हूं। "

componentWillMountविपरीत है। यह आपके घटक रेंडर के तुरंत बाद आग लगा देगा।

यहां देखें https://facebook.github.io/react/docs/component-specs.html

अंत में, "आरोह" शब्द प्रतिक्रिया के लिए अद्वितीय प्रतीत होता है। जेएस मुझे नहीं लगता कि यह एक सामान्य जावास्क्रिप्ट अवधारणा है, या एक सामान्य ब्राउज़र अवधारणा भी है।


इसलिए माउंट को "रखा" कहा जा सकता है?
गेट

मैं ऐसा कहूंगा, हां।
रॉस प्रेसर

मैं कहूंगा कि बोली कुछ भ्रामक है, क्योंकि इसे केवल शुरुआती रेंडर के बाद कहा जाता है , अपडेट के कारण पुन: रेंडरिंग पर नहीं। इसके componentDidUpdateबजाय कहा जाता है।
हेंस जोहानसन

+1 इस facebook.github.io/react/docs/… के लिए , वहाँ वर्णन की पुष्टि करता है कि इसे रखा गया है;)
गेट्स

5

जब आपका रिएक्ट कंपोनेंट पहली बार पेश किया जाता है, तो शुरुआती पेज लोडिंग को संदर्भित करता है बढ़ते के लिए प्रतिक्रिया प्रलेखन से: घटकडिमाउंट:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

आप इसे कंपोनेंटड्यूपडेट फ़ंक्शन के साथ विपरीत कर सकते हैं, जिसे रिएक्ट रेंडरर्स (शुरुआती माउंट को छोड़कर) कहा जाता है।


3

रिएक्ट जेएस का मुख्य लक्ष्य पुन: प्रयोज्य घटकों का निर्माण करना है। यहाँ, घटक एक वेबपेज के अलग-अलग भाग हैं। उदाहरण के लिए, एक वेबपेज में हेडर एक घटक है, पाद एक घटक है, एक टोस्ट अधिसूचना एक घटक है और आदि "माउंट" शब्द हमें बताता है कि इन घटकों को डोम में लोड या गाया जाता है। ये कई शीर्ष स्तर के एपीआई और इससे निपटने के तरीके हैं।

इसे सरल बनाने के लिए, घुड़सवार का मतलब घटक को DOM पर लोड किया गया है और अनमाउंट का मतलब है कि घटक DOM से हटा दिया गया है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.