रिएक्ट के साथ कोडिंग आज़माने के बारे में सोच रहे हैं? रिएक्ट 18 में आज़माने के लिए यहां प्रमुख नई सुविधाएं दी गई हैं।

रिएक्ट 2013 में फेसबुक द्वारा बनाई गई एक बहुत लोकप्रिय ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है। इसके लचीलेपन के कारण, बहुत से डेवलपर्स तेज़, कुशल और पुन: प्रयोज्य उपयोगकर्ता इंटरफ़ेस (यूआई) घटकों के निर्माण में इसकी कुछ विशेषताओं का उपयोग करते हैं।

मार्च 2022 में, टीम ने रिएक्ट लाइब्रेरी का सबसे हालिया और प्रत्याशित संस्करण, रिएक्ट 18 लॉन्च किया, जिसमें नई सुविधाएँ शामिल हैं जो एप्लिकेशन के प्रदर्शन को बेहतर बनाने पर ध्यान केंद्रित करती हैं।

रिएक्ट 18 में नई सुविधाएँ

रिएक्ट 18 में कुछ उपयोगी नई सुविधाएँ जोड़ी गई हैं ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी. इनमें से कई बदलाव पिछले संस्करण में नहीं थे जबकि अन्य सुविधाओं में सुधार किया गया था। इनमें से कुछ विशेषताओं में शामिल हैं; एक नया रूट एपीआई, स्वचालित बैचिंग, ट्रांज़िशन एपीआई, सस्पेंस एपीआई और नए हुक की रिलीज़।

नई रूट एपीआई

रिएक्ट में रूट एपीआई इस बात पर नज़र रखता है कि पेड़ में शीर्ष-स्तरीय घटक कैसे प्रस्तुत किया जाता है। रिएक्ट के पिछले संस्करणों में,

instagram viewer
प्रदान करना रेंडरिंग को निष्पादित करने के लिए विधि का उपयोग किया गया था जिसे अब लीगेसी रूट एपीआई कहा जाता है।

हालाँकि, रिएक्ट 18 एक नए रूट एपीआई के साथ आता है जो इसका उपयोग करके एक रूट बनाता है createRoot विधि और फिर का उपयोग करके बनाए गए रूट पर एक रिएक्ट घटक प्रस्तुत करता है प्रदान करना तरीका।

यह नया रूट एपीआई आपको इस हालिया संस्करण में सुविधाओं तक पहुंच प्रदान करेगा जैसे कि बाद में चर्चा की गई ट्रांज़िशन एपीआई सुविधा। जबकि पुराना तरीका अभी भी रिएक्ट 18 में काम करेगा, भविष्य में इसे चरणबद्ध तरीके से समाप्त किया जा सकता है।

नीचे दिया गया स्निपेट दिखाता है कि रूट एपीआई को विरासत और नए दोनों तरीकों से कैसे संरचित किया गया है।

लीगेसी रूट एपीआई

आयात रिएक्टडोम से'प्रतिक्रिया-डोम';
आयात अनुप्रयोग से'।/अनुप्रयोग';
ReactDOM.रेंडर(<अनुप्रयोग />, दस्तावेज़.getElementById('अनुप्रयोग'))

नई रूट एपीआई

आयात रिएक्टडोम से'प्रतिक्रिया-डोम/ग्राहक';
आयात अनुप्रयोग से'।/अनुप्रयोग';
कॉन्स्ट रूट = ReactDOM.createRoot(दस्तावेज़.getElementById('अनुप्रयोग'));
रूट.रेंडर(<अनुप्रयोग />)

स्वचालित बैचिंग

रिएक्ट में बैचिंग में उदाहरण के लिए प्रत्येक ब्राउज़र इवेंट पर एक ही री-रेंडर में कई स्टेट अपडेट शामिल होते हैं इवेंट पर क्लिक करें. किसी घटना के बाहर होने वाले किसी भी स्थिति परिवर्तन जैसे वादा या कॉलबैक को बैच नहीं किया जाएगा।

रिएक्ट 18 के साथ, बैचिंग स्थिति अपडेट स्वचालित रूप से किए जाते हैं, चाहे ये अपडेट कहीं भी हों। यह सुविधा प्रदर्शन और रेंडरिंग समय में आउट ऑफ द बॉक्स सुधार प्रदान करती है। हालाँकि, यदि आपके पास एक घटक स्थिति है जिसे आप बैच नहीं करना चाहते हैं, तो आप इसका उपयोग करके इससे बाहर निकलने का विकल्प चुन सकते हैं फ्लशसिंक तरीका। नीचे एक नमूना स्निपेट है कि यह कैसे किया जा सकता है;

आयात { फ्लशसिंक } से'प्रतिक्रिया-डोम';
समारोहहैंडलक्लिक() {
 फ्लशसिंक(() => {
 सेटकाउंट(गिनती करना => गिनती + 1);
]});
 फ्लशसिंक(() => {
 सेटस्टोर(इकट्ठा करना => !इकट्ठा करना);
});
}

संक्रमण एपीआई

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

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

आयात { प्रारंभट्रांज़िशन } से"प्रतिक्रिया";
प्रारंभसंक्रमण(() => {
 सेटसर्च (इनपुट);
});

कौतुहल

जब किसी एप्लिकेशन को सर्वर पर प्रस्तुत किया जाता है, तो एक स्थिर HTML फ़ाइल ब्राउज़र में वापस आ जाती है, जिससे उपयोगकर्ता यह देख सकता है कि जावास्क्रिप्ट लोड होने के दौरान ऐप कैसा दिखता है। जब फ़ाइल लोड की जाती है, तो HTML गतिशील हो जाता है जिसे कहा जाता है हाइड्रेशन. यहां कमी यह है कि यदि ये सब जगह पर नहीं हैं, तो आपका एप्लिकेशन इंटरैक्टिव नहीं बन पाएगा।

इस समस्या को हल करने के लिए, रिएक्ट 18 का उपयोग करके दो नई सर्वर साइड रेंडरिंग (एसएसआर) सुविधाएं प्रदान की जाती हैं कौतुहल अवयव;

  • स्ट्रीमिंग HTML किसी घटक के टुकड़ों को रेंडर होते ही भेजने की अनुमति देती है।
  • चयनात्मक जलयोजन उपयोगकर्ता द्वारा चयनित घटकों की अन्तरक्रियाशीलता को प्राथमिकता देता है।

नए हुक

रिएक्ट के लिए एक बड़ा मोड़ इसकी शुरूआत थी प्रतिक्रिया में हुक संस्करण 16 जो फ़ंक्शन घटकों को कक्षाओं को लिखे बिना राज्यों और अन्य रिएक्ट सुविधाओं तक पहुंचने की अनुमति देता है। डेवलपर्स के अनुभव को बेहतर बनाने के लिए रिएक्ट 18 पांच नए हुक के साथ आता है;

  • उपयोगआईडी: यह हुक हमें सर्वर और क्लाइंट दोनों पर हमारे एप्लिकेशन में एक विशिष्ट पहचानकर्ता (आईडी) बनाने की अनुमति देता है।
  • यूज़ट्रांज़िशन: इसका उपयोग साथ में किया जाता है प्रारंभसंक्रमण एक नया राज्य अद्यतन बनाने के लिए जिसे गैर-जरूरी कहा जा सकता है।
  • useDeferedValue: यह उन अपडेट को स्थगित करने की अनुमति देता है जो कम जरूरी हैं।
  • उपयोगसिंकएक्सटर्नलस्टोर: बाहरी डेटा स्रोतों की सदस्यता लागू करते समय यह हुक उपयोगी है।
  • useInsertionEffect: यह हुक DOM में शैलियों को इंजेक्ट करने के लिए CSS-in-JS लाइब्रेरी लेखकों तक सीमित है।

रिएक्ट 18 में अपडेट कैसे करें

अपडेट करने के लिए, टर्मिनल में निम्नलिखित कमांड चलाकर एनपीएम या यार्न पैकेज मैनेजर का उपयोग किया जा सकता है।

NPM स्थापित करना प्रतिक्रिया प्रतिक्रिया-डोम

या

यार्न जोड़ें प्रतिक्रिया प्रतिक्रिया-डोम

फिर, आपको इसमें बदलाव करना होगा सूचकांक.जे.एस जैसा कि पहले दिखाया गया है, लीगेसी एपीआई से नए रूट एपीआई तक प्रोजेक्ट के फ़ोल्डर की रूट निर्देशिका में फ़ाइल करें।

एक नया रिएक्ट 18 प्रोजेक्ट कैसे स्थापित करें

एक नया रिएक्ट 18 प्रोजेक्ट स्थापित करने के लिए, टर्मिनल में एनपीएम या यार्न के साथ create-react-app पैकेज स्थापित किया गया है;

एनपीएक्स बनाएं-प्रतिक्रिया-ऐप मेरा-प्रतिक्रिया-ऐप

या

सूत जोड़ें बनाएं-प्रतिक्रिया-ऐप मेरा-प्रतिक्रिया-ऐप

रिएक्ट 18 के साथ अपने एप्लिकेशन प्रदर्शन में सुधार करें

अब आप रिएक्ट 18 में कुछ नई सुविधाओं जैसे नए रूट एपीआई, सस्पेंस, ट्रांज़िशन या स्वचालित बैचिंग के बारे में जानते हैं, और इस नए संस्करण में अपग्रेड कैसे करें और इसे स्क्रैच से कैसे सेट करें।

रिएक्ट में ये हालिया बदलाव अभी आपके अनुभव के लिए तैयार हैं।