कैसे ReactJS काम करता है प्रतिक्रिया पैकेज

अधिकांश लोगों ने एक या दूसरे तरीके से काम किया है। यह एक जावास्क्रिप्ट पुस्तकालय है जो शांत इंटरफेस बनाने में मदद करता है, हाल के वर्षों में इसने जबरदस्त लोकप्रियता हासिल की है। हालांकि, बहुत से लोग नहीं जानते कि यह अंदर कैसे काम करता है।

लेखों की इस श्रृंखला में, हम कोड पढ़ते हैं और यह पता लगाने की कोशिश करते हैं कि प्रतिक्रिया के लिए हुड के नीचे जो पैकेज हैं, वे किसके लिए उपयोग किए जाते हैं और वे कैसे काम करते हैं। ब्राउज़र में हमारे द्वारा उपयोग किए जाने वाले सबसे बुनियादी हैं react , react-dom , events और react-reconciler ।

हम क्रम में आगे बढ़ेंगे और आज हमारे पास react पैकेज के बारे में एक लेख है। कौन परवाह करता है कि इस पैकेज में क्या है - बिल्ली के नीचे जाओ।

सबसे पहले, हम एक छोटा सा उदाहरण देंगे, जिसके आधार पर हम इस पैकेज पर विचार करेंगे। हमारा गैजेट इस तरह दिखेगा:

 function App() { const [text, changeText] = React.useState('Initial'); return ( <div className="app"> <span>{text}</span> <input type="text" value={text} onInput={(e) => changeText(e.target.value)} /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ) ; 

आइए कोड के इस टुकड़े पर एक त्वरित नज़र डालें। यहाँ हम हुक की कॉल को React.useState('Initial') माध्यम से देखते हैं, React.useState('Initial') एक सा और पेज पर यह सब प्राप्त करने के लिए रेंडर विधि की कॉल।
वास्तव में, जैसा कि बहुत से लोग जानते हैं, यह अंतिम कोड नहीं है जो ब्राउज़र प्रक्रिया करता है। इससे पहले कि यह निष्पादित हो जाए, इसे ट्रांसप्लड किया जाता है, उदाहरण के लिए, एक बैबल के साथ। इस स्थिति में, फ़ंक्शन रिटर्न निम्नलिखित में बदल जाएगा:

 return React.createElement( "div", { className: "app" }, React.createElement("span", null, text), React.createElement("input", { type: "text", value: text, onInput: function onInput(e) { return changeText(e.target.value); } }) ); 

कौन प्रयोग करता है और देखता है कि आपका बबल कोड क्या होता है - बैबल रिप्लाई ।

React.createElement

इसलिए, हमें React.createElement() और इस फ़ंक्शन को देखने के लिए समय के लिए बहुत सारे कॉल React.createElement() । हम इसे शब्दों में वर्णित करेंगे (या आप फाइल को भी देख सकते हैं - ReactElement.js )।

सबसे पहले, यह जांचता है कि क्या हमारे पास प्रॉप्स हैं (कोड में, जिस प्रॉप्स को हमने पास किया है उसे config कहा जाता है)।

अगला, हम यह देखने के लिए जांचते हैं कि क्या हमारे पास key और ref प्रॉप्स हैं जो undefined नहीं हैं, और यदि कोई हो, तो उन्हें बचाएं।

 if (hasValidKey(config)) { key = '' + config.key; } 

एक दिलचस्प बिंदु यह है कि config.key को एक स्ट्रिंग में config.key जाता है, जिसका अर्थ है कि आप किसी भी डेटा प्रकार को कुंजी के रूप में पास कर सकते हैं, मुख्य बात यह है कि यह .toString() या .valueOf() विधि को लागू करता है और एक विशेष सेट के लिए अद्वितीय मान लौटाता है।

अगले चरण निम्नलिखित हैं:

• उस तत्व को कॉपी करें जो तत्व को पारित किया गया था;
• अगर हम उन्हें प्रॉम्प्ट से नहीं, बल्कि नेस्टेड तत्व के रूप में देते हैं, तो वहां children जोड़ें;
• हम उन गुणों के लिए डिफ़ॉल्ट मान सेट करते हैं, जिन्हें हमने पहले परिभाषित नहीं किया था।

जब हमने सभी डेटा तैयार किए हैं, तो हम एक आंतरिक फ़ंक्शन कहते हैं जो एक ऑब्जेक्ट बनाता है जो हमारे घटक का वर्णन करता है। यह ऑब्जेक्ट इस तरह दिखता है:

 { // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Symbol // Built-in properties that belong on the element type: type, key: key, ref: ref, props: props, // Record the component responsible for creating this element. _owner: owner, } 

यहां हमारे पास $$typeof प्रॉपर्टी है, जो कि एक प्रतीक है, इसलिए किसी भी तरह से खिसकें, जो वस्तु विफल हो जाएगी।

type गुण बनाने के लिए तत्व के प्रकार को संग्रहीत करता है। हमारे उदाहरण के मामले में, यह App() फ़ंक्शन और लाइनें 'div' , 'span' और 'input' ।

key संपत्ति में वही कुंजी होगी, जिसके कारण चेतावनी कंसोल पर उड़ती है।
प्रॉप्स में वह होगा जो हमने पारित किया है, children और defaultProps में क्या निर्दिष्ट किया गया था। ref साथ सही काम के लिए _owner संपत्ति आवश्यक है।

हमारे उदाहरण के लिए अनुवादित, React.createElement(App, null) का परिणाम इस तरह दिखेगा:

 { $$typeof: REACT_ELEMENT_TYPE, type: App, key: null, ref: null, props: {}, _owner: null, } 

इसके अलावा, देव मोड में, हमारे पास एक अतिरिक्त फ़ील्ड होगा जिसका उपयोग फ़ाइल नाम और लाइन के साथ एक सुंदर स्टैक प्रदर्शित करने के लिए किया जाएगा:

 _source: { fileName: "/Users/appleseed/react-example/src/index.js", lineNumber: 7 } 

ऊपर हमने जो कुछ देखा, उसके बारे में थोड़ा बताने के लिए। react पैकेज हमारे और बाकी पैकेजों के बीच एक अनुवादक के रूप में कार्य करता है जो हमारे आवेदन पर आगे काम करता है, हमारे कॉल को ऐसे शब्दों में अनुवाद करता है जो समझने योग्य हैं, उदाहरण के लिए, सुलह करने वाले के लिए।

React.useState

संस्करण 16.8 में, हुक दिखाई दिए। यह क्या है और इसका उपयोग कैसे करें आप लिंक को पढ़ सकते हैं, लेकिन अब हम इस बात पर एक नज़र डालते हैं कि react पैकेज में क्या निहित है।

वास्तव में, कहने के लिए बहुत कुछ नहीं है। संक्षेप में, एक पैकेज एक मुखौटा है जिसके माध्यम से हमारी चुनौतियाँ आंतरिक संस्थाओं तक जाती हैं।

इसलिए, useState करना कोड की दो पंक्तियों से अधिक नहीं है:

 export function useState<S>(initialState: (() => S) | S) { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); } 

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

हुक के वास्तविक कार्यान्वयन को react-reconciler पैकेज में संग्रहीत किया जाता है, जिसके बारे में हम निम्नलिखित लेखों में से एक में बात करेंगे।

आगे क्या है

एक बात और। इस लेख को पढ़ने के बाद, आप समझ सकते हैं कि हम हमेशा प्रतिक्रिया पैकेज को क्यों आयात करते हैं, भले ही हम इसे सीधे उपयोग न करें। यह आवश्यक है ताकि बुलबुले द्वारा हमारे जेएसएक्स को पचाने के बाद, हमारे पास एक React चर हो।

प्रतिक्रिया टीम के लोगों ने इस पर ध्यान दिया (और यही नहीं) और अब createElement जगह पर काम कर रहे हैं।

संक्षेप में समझाने की कोशिश: दो - jsx और jsx साथ तत्वों को बनाने की वर्तमान पद्धति को बदलने की इच्छा है। यह कई कारणों से आवश्यक है:

• हमने ऊपर बताया कि कैसे createElement काम करता है। यह लगातार प्रॉप्स को कॉपी करता है और ऑब्जेक्ट में children क्षेत्र को जोड़ता है, जिसमें यह उन बच्चों को बचाता है जिन्हें हमने फ़ंक्शन के तर्क के रूप में पारित किया था (3 तर्क और आगे)। अब इसे jsx को javascript कॉल्स में बदलने के चरण में करने का प्रस्ताव है, क्योंकि एक एलीमेंट बनाना अक्सर फंक्शन कहा जाता है और यह हर बार रनटाइम में प्रॉपर मॉडिफिकेशन करने के लिए स्वतंत्र नहीं है;
• आप React ऑब्जेक्ट को आयात करने से छुटकारा पा सकते हैं और केवल विशिष्ट कार्यों को आयात कर सकते हैं (उदाहरण के लिए, import { jsx } from 'react' ), और, तदनुसार, असेंबली में जो हम उपयोग नहीं कर रहे हैं उसे जोड़ने में सक्षम न हों। इसके अलावा, आपको हर बार React ऑब्जेक्ट के createElement फ़ील्ड को हल करने की आवश्यकता नहीं है, क्योंकि यह भी मुफ़्त नहीं है;
• हमने ऊपर चर्चा की कि हमारे पास एक विशेष मामला है जब हम key को प्रॉपर से बाहर खींचते हैं और इसे आगे भेजते हैं। अब ट्रांसप्लिंग चरण में jsx से key लेना और तत्व निर्माण फ़ंक्शन के लिए तीसरा पैरामीटर पास करना प्रस्तावित है।

और पढ़ें यहाँ react पैकेज में पहले से ही jsx और jsxs । यदि आप इसके साथ खेलना चाहते हैं, तो आप रिएक्शन रिपॉजिटरी को क्लोन कर सकते हैं, enableJSXTransformAPI फ्लैग को सेट किए गए ReactFeatureFlags.js फ़ाइल में सही से shared और नए API सक्षम के साथ प्रतिक्रिया ( yarn build ) के अपने संस्करण को संकलित करें।

अन्त

इस पर मैं react पैकेज के बारे में आज की कहानी को समाप्त करूंगा और अगली बार हम इस बारे में बात करेंगे कि react-dom पैकेज का उपयोग कैसे होता है और react-dom क्या react है और यह कैसे लागू होती है।

अंत तक पढ़ने के लिए धन्यवाद!