मान लें कि मेरे पास एक प्रतिक्रिया घटक है जो इस तरह दिखता है:
const MyReactComponent = (props) => {
const my_function = () => {// do some stuff...}
return (
<div>
<p>
Hello {props.name}, would you like to eat a {my_function()}?
</p>
</div>
)
}
क्या हर बार My_React_Component का उपयोग किए जाने पर कोड परिभाषित करना my_function का पुनर्मूल्यांकन किया जाएगा? ("प्रयुक्त" से मेरा मतलब है "जेएसएक्स में दिखाई देता है।")
3 जवाब
हां। की तरह। शायद नहीं।
जावास्क्रिप्ट फ़ंक्शन निष्पादित करते समय फ़ंक्शन में प्रत्येक पंक्ति निष्पादित/मूल्यांकन की जाएगी। तो फ़ंक्शन परिभाषा का मूल्यांकन हर बार आपके फ़ंक्शन को कॉल करने पर किया जाएगा। चूंकि आप एक फ़ंक्शन घटक का उपयोग कर रहे हैं, हां, फ़ंक्शन न केवल आपके घटक का उपयोग किए जाने पर, बल्कि हर बार इसे फिर से प्रस्तुत करने पर भी फिर से परिभाषित हो जाएगा।
हालांकि, क्या इसका मतलब यह है कि जावास्क्रिप्ट हर बार परिभाषित होने पर फ़ंक्शन को पुन: संकलित करता है? शायद। सिद्धांत रूप में जावास्क्रिप्ट को फ़ंक्शन को पुन: संकलित करने की आवश्यकता नहीं है। इसे केवल एक नया बंद बनाने की जरूरत है। सिद्धांत रूप में आपको एक नया बंद करने के लिए फ़ंक्शन को पुन: संकलित करने की आवश्यकता नहीं है - आपको केवल फ़ंक्शन के स्टैक फ्रेम की एक प्रति चाहिए। नेटस्केप4 से भारी प्रतिस्पर्धा के कारण अधिकांश जावास्क्रिप्ट दुभाषियों को इस हद तक अनुकूलित किया गया है कि लगभग कोई भी आधुनिक जावास्क्रिप्ट दुभाषिया आंतरिक कार्य को फिर से संकलित नहीं करेगा। तो फ़ंक्शन परिभाषा का सबसे धीमा हिस्सा केवल एक बार होता है।
फिर भी, सिद्धांत रूप में यह अभी भी वर्ग-आधारित घटकों को फ़ंक्शन घटकों पर एक छोटा सा लाभ देता है: फ़ंक्शन परिभाषा को प्रत्येक रेंडर पर फिर से मूल्यांकन करने की आवश्यकता नहीं होती है। व्यवहार में प्रदर्शन अंतर बहुत छोटा है।
यदि आप वास्तव में फ़ंक्शन परिभाषा के पुनर्मूल्यांकन से बचने पर जोर देते हैं तो आप इसे हमेशा घटक के बाहर घोषित कर सकते हैं। यह निश्चित रूप से केवल एक बार फ़ंक्शन का मूल्यांकन करेगा। हालाँकि, आप फ़ंक्शन के साथ चर साझा करने के लिए क्लोजर का उपयोग नहीं कर सकते हैं, लेकिन यह बहुत अधिक समस्या नहीं है क्योंकि आप हमेशा फ़ंक्शन में वेरिएबल्स को पास कर सकते हैं। घटकों के बाहर कार्यों की घोषणा करने से आपको क्लोजर साझा करने में असमर्थता के कारण शुद्ध कार्य लिखने के लिए भी प्रोत्साहित किया जाता है:
const my_function = (propsArgs) => {// do some stuff...}
const MyReactComponent = (props) => {
return (
<div>
<p>
Hello {props.name}, would you like to eat a {my_function(props)}?
</p>
</div>
)
}
क्या आपका मतलब प्रयुक्त या पुन: प्रस्तुत है?
उस मामले में जब आपका मतलब इस्तेमाल किया गया था: हां प्रत्येक घटक अपने स्वयं के उदाहरण के रूप में कार्य करता है इसलिए विधियों को हर बार निष्पादित किया जाता है जब फ़ंक्शन को या तो कहा जाता है या घटक प्रारंभ में प्रस्तुत किया जाता है (यदि प्रतिपादन पर उपयोग किया जाता है), लेकिन यदि आप डीओएम पर कई बार घटक का उपयोग करते हैं, तो यह स्क्रिप्ट लिखता है केवल एकबार। डीओएम के उस हिस्से के लिए मार्कअप डुप्लिकेट किया गया है, हालांकि स्क्रिप्ट नहीं है।
जब केवल प्रारंभ करें, शायद आप उपयोग कर सकते हैं
React.useEffect(() => {
const my_function = () => {console.log('my_function')}
my_function();
}, [])