जवाबों:
रिएक्ट का मुख्य काम यह पता लगाना है कि स्क्रीन पर घटकों को प्रस्तुत करने के लिए डोम को कैसे संशोधित किया जाए।
रिएक्ट "बढ़ते" (डोम में नोड्स जोड़कर), "अनमाउंटिंग" (उन्हें डोम से हटाकर), और "अपडेट" (डोम में पहले से ही नोड्स में बदलाव करते हुए) करता है।
एक प्रतिक्रिया नोड को 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 />
, उस स्थिति में प्रतिक्रिया इसके लिए एक div
DOM नोड बनाएगी , और इसे DOM कंटेनर में डालेंगी।
प्रतिक्रिया घटकों के लिए इंस्टेंसेस और DOM नोड्स बनाने और DOM में सम्मिलित करने की इस प्रक्रिया को माउंटिंग कहा जाता है।
ध्यान दें कि आम तौर पर आप केवल ReactDOM.render()
रूट कंपोनेंट को माउंट करने के लिए कॉल करेंगे। आपको बच्चे के घटकों को मैन्युअल रूप से "माउंट" करने की आवश्यकता नहीं है। जब भी कोई अभिभावक घटक कॉल करता है setState()
, और उसकी render
विधि कहती है कि किसी विशेष बच्चे को पहली बार प्रस्तुत किया जाना चाहिए, तो रिएक्ट स्वतः ही इस बच्चे को उसके माता-पिता में "माउंट" कर देगा।
findDOMNode
रिएक्ट तत्वों पर नहीं चल सकते )।
प्रतिक्रिया एक समद्विबाहु / सार्वभौमिक ढांचा है। इसका अर्थ है कि 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
बेहतर नाम होंगे।
componentDidRender
लिए एक विकल्प है componentDidMount
क्योंकि घटक कई बार प्रस्तुत कर सकता है जब प्रॉप्स एक बार माउंट होने के बाद बदल जाता है।
(id === that.id) ? <Component /> : null
| /app/items/:id
| this.setState(...)
।
/react-js-the-king-of-universal-apps/
( संपादित-टिप्पणियों के साथ स्पष्ट रूप से उल्लेख किया गया है कि यह एक टूटी हुई लिंक है ), लेकिन साथियों ने दोनों बार संपादन को अस्वीकार कर दिया है । क्या कोई मुझे मार्गदर्शन दे सकता है कि एक उत्तर को संपादित करने और एक टूटी हुई कड़ी को हटाने में क्या गलत है?
माउंटिंग से तात्पर्य घटक के रिएक्ट में निर्मित (डीओएम नोड्स) दस्तावेज के कुछ भाग से जुड़ा होना है। बस!
प्रतिक्रिया को अनदेखा करते हुए आप इन दो मूल कार्यों को बढ़ते हुए सोच सकते हैं:
आंतरिक रूप से माउंट करने के लिए रिएक्ट का उपयोग करने वाले सबसे आम कार्यों की संभावना है।
सोच:
घटक-माउंट === पहले-माउंट
तथा:
घटकडाउनमाउंट === आफ्टर-माउंट
appendChild
, तो क्या है render
?
render
कि वास्तविक तरीका है जो खुद ही बढ़ते हैं। तो componentWillMount
== से पहले, render
== componentDidMount
माउंट सम्मिलन करता है, और = = माउंट के बाद (या render
घटक को सम्मिलित करने के लिए एक डोम एपीआई को बुलाया है और उस अतुल्यकालिक ऑपरेशन पूरी तरह से पूरा हो गया है)
https://facebook.github.io/react/docs/tutorial.html
यहाँ, ComponentsDidMount एक विधि है जिसे प्रतिक्रिया द्वारा स्वचालित रूप से बुलाया जाता है जब एक घटक प्रदान किया जाता है।
अवधारणा यह है कि आप ReactJS को बता रहे हैं, "कृपया इस बात को, इस टिप्पणी बॉक्स या कताई छवि या जो कुछ भी मैं चाहता हूं, उसे ब्राउज़र पृष्ठ पर ले जाएं, और आगे बढ़ें और वास्तव में इसे ब्राउज़र पृष्ठ पर डाल दें। जब ऐसा हो जाए, तो कॉल करें। मेरा कार्य जो मैं करने के लिए बाध्य componentDidMount
हूं, मैं आगे बढ़ सकता हूं। "
componentWillMount
विपरीत है। यह आपके घटक रेंडर के तुरंत बाद आग लगा देगा।
यहां देखें https://facebook.github.io/react/docs/component-specs.html
अंत में, "आरोह" शब्द प्रतिक्रिया के लिए अद्वितीय प्रतीत होता है। जेएस मुझे नहीं लगता कि यह एक सामान्य जावास्क्रिप्ट अवधारणा है, या एक सामान्य ब्राउज़र अवधारणा भी है।
componentDidUpdate
बजाय कहा जाता है।
जब आपका रिएक्ट कंपोनेंट पहली बार पेश किया जाता है, तो शुरुआती पेज लोडिंग को संदर्भित करता है बढ़ते के लिए प्रतिक्रिया प्रलेखन से: घटकडिमाउंट:
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).
आप इसे कंपोनेंटड्यूपडेट फ़ंक्शन के साथ विपरीत कर सकते हैं, जिसे रिएक्ट रेंडरर्स (शुरुआती माउंट को छोड़कर) कहा जाता है।
रिएक्ट जेएस का मुख्य लक्ष्य पुन: प्रयोज्य घटकों का निर्माण करना है। यहाँ, घटक एक वेबपेज के अलग-अलग भाग हैं। उदाहरण के लिए, एक वेबपेज में हेडर एक घटक है, पाद एक घटक है, एक टोस्ट अधिसूचना एक घटक है और आदि "माउंट" शब्द हमें बताता है कि इन घटकों को डोम में लोड या गाया जाता है। ये कई शीर्ष स्तर के एपीआई और इससे निपटने के तरीके हैं।
इसे सरल बनाने के लिए, घुड़सवार का मतलब घटक को DOM पर लोड किया गया है और अनमाउंट का मतलब है कि घटक DOM से हटा दिया गया है।
React.createElement(FooComponent)
करते हैं तो आप इसका उदाहरण नहीं बना रहे हैंFooComponent
। एक रिएक्ट तत्व के रूप में जाना जानेfoo
वाला एक आभासी डोम प्रतिनिधित्व हैFooComponent
। लेकिन हो सकता है किFooComponent
रिएक्ट टाइप से आपका यही मतलब हो । भले ही, आप रिएक्ट में घटकों को माउंट नहीं करते हैं, आप प्रस्तुत करते हैं जो बदले में घटक को माउंट कर सकते हैं यदि डोम ट्री में घटक का प्रतिनिधित्व करने के लिए वास्तविक डोम नोड बनाने की आवश्यकता होती है। वास्तविक माउंटिंग वह घटना है जिस पर यह पहली बार होता है।