व्यापक जीवनचक्र हुक: वे क्या हैं और वे कैसे काम करते हैं?

चाबी छीनना

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

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

जीवनचक्र हुक क्या हैं?

जीवनचक्र हुक ऐसी विधियाँ हैं जो किसी घटक के जीवनचक्र में विशिष्ट बिंदुओं पर ट्रिगर होती हैं। वे आपको इन बिंदुओं पर विशेष कार्य करने की अनुमति देते हैं, जैसे घटक को आरंभ करना, परिवर्तनों पर प्रतिक्रिया देना, या संसाधनों की सफाई करना।

अलग-अलग ढांचों में अलग-अलग जीवनचक्र हुक होते हैं, लेकिन वे सभी कुछ सामान्य विशेषताएं साझा करते हैं। स्वेल्टे चार प्रमुख जीवनचक्र हुक प्रदान करता है:

ऑनमाउंट, onDestroy, पहले अद्यतन करें, और अद्यतन के बाद.

एक व्यापक परियोजना की स्थापना

यह समझने के लिए कि आप Svelte के जीवनचक्र हुक का उपयोग कैसे कर सकते हैं, एक Svelte प्रोजेक्ट बनाकर शुरुआत करें। आप इसे विभिन्न तरीकों से कर सकते हैं, जैसे वाइट (एक फ्रंट-एंड बिल्ड टूल) का उपयोग करते हुए या अंक. डिजिट संपूर्ण गिट इतिहास को डाउनलोड किए बिना गिट रिपॉजिटरी को डाउनलोड और क्लोन करने के लिए एक कमांड-लाइन टूल है।

वाइट का उपयोग करना

Vite का उपयोग करके एक Svelte प्रोजेक्ट बनाने के लिए, अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npm init vite

एक बार जब आप कमांड चलाते हैं, तो आप अपने प्रोजेक्ट का नाम, जिस ढांचे का आप उपयोग करना चाहते हैं, और उस ढांचे के विशिष्ट संस्करण को प्रदान करने के लिए कुछ संकेतों का उत्तर देंगे।

अब, प्रोजेक्ट की निर्देशिका पर जाएँ और आवश्यक निर्भरताएँ स्थापित करें।

ऐसा करने के लिए निम्नलिखित आदेश चलाएँ:

cd svelte-app
npm install

अंक का उपयोग करना

डिजिट का उपयोग करके अपना Svelte प्रोजेक्ट सेट करने के लिए, इस कमांड को अपने टर्मिनल में चलाएँ:

npx degit sveltejs/template svelte-app

फिर, प्रोजेक्ट की निर्देशिका पर जाएँ और आवश्यक निर्भरताएँ स्थापित करें:

cd svelte-app
npm install

ऑनमाउंट हुक के साथ कार्य करना

ऑनमाउंट स्वेल्ट में हुक एक महत्वपूर्ण जीवनचक्र हुक है। जब किसी घटक को पहली बार प्रस्तुत किया जाता है और DOM में डाला जाता है, तो Svelte ऑनमाउंट हुक को कॉल करता है। यह के समान है कंपोनेंटडिडमाउंट रिएक्ट क्लास घटकों में जीवनचक्र विधि या उपयोगप्रभावरिएक्ट कार्यात्मक घटकों में हुक एक खाली निर्भरता सरणी के साथ।

आप मुख्य रूप से इनिशियलाइज़ेशन कार्यों को करने के लिए ऑनमाउंट हुक का उपयोग करेंगे, जैसे कि एक एपीआई से डेटा प्राप्त करना या इवेंट श्रोता स्थापित करना। ऑनमाउंट हुक एक फ़ंक्शन है जो एकल तर्क लेता है। यह तर्क वह फ़ंक्शन है जिसे एप्लिकेशन तब कॉल करेगा जब वह पहली बार घटक प्रस्तुत करेगा।

यहां एक उदाहरण दिया गया है कि आप ऑनमाउंट हुक का उपयोग कैसे कर सकते हैं:

<script>
import { onMount } from 'svelte'
onMount( () => { console.log('Component has been added to the DOM')} );
script>
<div>
<p>This is a random componentp>
div>

आपके में व्यापक-ऐप प्रोजेक्ट, एक बनाएं src/Test.svelte फ़ाइल करें और उसमें उपरोक्त कोड जोड़ें। यह कोड Svelte से ऑनमाउंट हुक आयात करता है और इसे एक साधारण फ़ंक्शन चलाने के लिए कॉल करता है कंसोल पर टेक्स्ट लॉग करता है. ऑनमाउंट हुक का परीक्षण करने के लिए, रेंडर करें परीक्षा आपके में घटक src/App.svelte फ़ाइल:

उदाहरण के लिए:

<script>
import Test from "./Test.svelte";
script>
<main>
<h1>Hello There!h1>
<Test />
main>

फिर ऐप चलाएं:

npm run dev

इस कमांड को चलाने से आपको एक स्थानीय यूआरएल मिलेगा http://localhost: 8080. अपना एप्लिकेशन देखने के लिए वेब ब्राउज़र में लिंक पर जाएं। ऐप आपके ब्राउज़र के कंसोल में "घटक को DOM में जोड़ा गया है" टेक्स्ट लॉग करेगा।

ऑनडिस्ट्रॉय हुक के साथ कार्य करना

के विपरीत के रूप में ऑनमाउंट हुक, स्वेल्ट कॉल करता है onDestroy हुक तब करें जब वह DOM से किसी घटक को हटाने वाला हो। ऑनडेस्ट्रॉय हुक घटक के जीवनचक्र के दौरान आपके द्वारा स्थापित किसी भी संसाधन या ईवेंट श्रोताओं को साफ करने के लिए उपयोगी है।

यह हुक रिएक्ट के समान है कंपोनेंटविलअनमाउंट जीवनचक्र विधि और उसके उपयोगप्रभाव एक सफाई समारोह के साथ हुक।

ऑनडेस्ट्रॉय हुक का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

<script>
import { onDestroy } from "svelte";
let intervalId;
intervalId = setInterval(() => {
 console.log("interval");
}, 1000);
onDestroy(() => {
 clearInterval(intervalId);
});
script>

यह कोड एक टाइमर शुरू करता है जो हर सेकंड आपके ब्राउज़र के कंसोल पर टेक्स्ट "अंतराल" को लॉग करता है। जब घटक DOM छोड़ता है तो अंतराल को साफ़ करने के लिए यह onDestroy हुक का उपयोग करता है। यह उस समय अंतराल को चलते रहने से रोकता है जब घटक की आवश्यकता नहीं रह जाती है।

beforeUpdate और AfterUpdate हुक के साथ कार्य करना

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

beforeUpdate हुक DOM अपडेट से पहले चलता है और जब भी घटक की स्थिति बदलती है। यह उसके जैसा है अद्यतन से पहले स्नैपशॉट प्राप्त करें रिएक्ट क्लास घटकों में। एप्लिकेशन की नई स्थिति की तुलना उसकी पुरानी स्थिति से करते समय आप मुख्य रूप से beforeUpdate हुक का उपयोग करते हैं।

नीचे beforeUpdate हुक का उपयोग करने का एक उदाहरण दिया गया है:

<script>
import { beforeUpdate } from "svelte";
let count = 0;
beforeUpdate(() => {
 console.log("Count before update:", count);
});
function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

कोड को अपने में बदलें परीक्षा उपरोक्त कोड ब्लॉक वाला घटक। यह कोड मान लॉग करने के लिए beforeUpdate हुक का उपयोग करता है गिनती करना DOM अपडेट से पहले स्थिति बताएं। हर बार जब आप बटन पर क्लिक करते हैं, तो इंक्रीमेंट फ़ंक्शन चलता है और गिनती स्थिति का मान 1 से बढ़ जाता है। यह beforeUpdate फ़ंक्शन को चलाने और गिनती स्थिति के मान को लॉग करने का कारण बनता है।

आफ्टरअपडेट हुक DOM अपडेट के बाद चलता है। इसका उपयोग आम तौर पर कोड चलाने के लिए किया जाता है जिसे DOM अपडेट के बाद चलाने की आवश्यकता होती है। यह हुक समान है कंपोनेंटडिडअपडेट प्रतिक्रिया में. आफ्टरअपडेट हुक पहले वाले अपडेट हुक की तरह काम करता है।

उदाहरण के लिए:

<script>
import { afterUpdate } from "svelte";
let count = 0;
afterUpdate(() => {
 console.log("Count after update:", count);
});
function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

उपरोक्त कोड ब्लॉक पिछले वाले के समान है, लेकिन यह इसके बजाय गिनती स्थिति के मान को लॉग करने के लिए आफ्टरअपडेट हुक का उपयोग करता है। इसका मतलब यह है कि यह DOM अपडेट के बाद गिनती स्थिति को लॉग करेगा।

स्वेल्ट के जीवनचक्र हुक का उपयोग करके मजबूत ऐप्स बनाएं

Svelte में जीवनचक्र हुक गतिशील और प्रतिक्रियाशील एप्लिकेशन बनाने के लिए उपयोग किए जाने वाले आवश्यक उपकरण हैं। जीवनचक्र हुक को समझना Svelte प्रोग्रामिंग का एक महत्वपूर्ण हिस्सा है। इन हुक का उपयोग करके, आप अपने घटकों के आरंभीकरण, अद्यतन और विनाश को नियंत्रित कर सकते हैं और उनकी स्थिति में बदलाव को संभाल सकते हैं।