लाइफसाइकल हुक्स
लाइफसाइकल हुक्स एंगुलर में विशेष मेथड्स हैं जो डेवलपर्स को किसी कंपोनेंट के जीवनचक्र के विभिन्न चरणों में इंटरसेप्ट करने की अनुमति देती हैं। इन हुक्स का उपयोग कंपोनेंट के निर्माण, इनिशियलाइज़ेशन, अपडेट और डेस्ट्रक्शन के दौरान किया जाता है। यह SPA (Single Page Applications) में विशेष रूप से महत्वपूर्ण है क्योंकि यह डेटा फ्लो, स्टेट मैनेजमेंट और प्रदर्शन (performance) को नियंत्रित करने में मदद करता है।
एंगुलर में हुक्स जैसे ngOnInit, ngOnChanges, ngAfterViewInit, और ngOnDestroy उपलब्ध हैं। ngOnInit का उपयोग डेटा इनिशियलाइजेशन और सब्सक्रिप्शन शुरू करने के लिए किया जाता है। ngOnChanges हर बार @Input() वैल्यू बदलने पर ट्रिगर होता है। ngAfterViewInit का उपयोग DOM एलिमेंट्स या चाइल्ड कंपोनेंट्स को एक्सेस करने के लिए किया जाता है। ngOnDestroy का उपयोग संसाधनों को रिलीज़ करने और सब्सक्रिप्शन्स को अनसब्सक्राइब करने के लिए किया जाता है।
इस ट्यूटोरियल में आप सीखेंगे कि कैसे लाइफसाइकल हुक्स का उपयोग करके पुन: उपयोग योग्य कंपोनेंट्स बनाए जाते हैं, डेटा फ्लो को नियंत्रित किया जाता है और प्रदर्शन को अनुकूलित किया जाता है। आप सामान्य गलतियों जैसे prop drilling, अनावश्यक re-renders, और state mutations से कैसे बच सकते हैं, यह भी जानेंगे।
मूल उदाहरण
typescriptimport { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-user-profile',
template: ` <div> <h2>यूज़र प्रोफ़ाइल</h2> <p>नाम: {{ name }}</p> <p>स्टेटस: {{ status }}</p> </div>
`
})
export class UserProfileComponent implements OnChanges, OnInit, OnDestroy {
@Input() name!: string;
status: string = 'इनिशियलाइजिंग...';
constructor() {
console.log('कंस्ट्रक्टर: कंपोनेंट क्रिएटेड');
}
ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges: इनपुट वैल्यू चेंज हुई', changes);
}
ngOnInit(): void {
console.log('ngOnInit: कंपोनेंट इनिशियलाइज हुआ');
this.status = 'सक्रिय';
}
ngOnDestroy(): void {
console.log('ngOnDestroy: कंपोनेंट डेस्टॉय हो रहा है');
}
}इस उदाहरण में UserProfileComponent लाइफसाइकल हुक्स का उपयोग करता है। कंस्ट्रक्टर कंपोनेंट की निर्माण प्रक्रिया को हैंडल करता है। ngOnChanges तब कॉल होता है जब किसी @Input() वैल्यू में बदलाव होता है, जिससे डेवलपर डेटा बदलावों पर प्रतिक्रिया दे सकते हैं।
ngOnInit कंपोनेंट के इनिशियलाइज़ेशन के लिए आदर्श स्थान है, जैसे API कॉल्स, डेटा इनिशियलाइजेशन और सब्सक्रिप्शन सेटअप। ngOnDestroy को संसाधनों को रिलीज़ करने और सब्सक्रिप्शन्स को अनसब्सक्राइब करने के लिए उपयोग किया जाता है।
इस प्रकार, लाइफसाइकल हुक्स का सही उपयोग कंपोनेंट्स को अधिक पुन: उपयोग योग्य, स्थिर और प्रदर्शन-केंद्रित बनाता है।
व्यावहारिक उदाहरण
typescriptimport { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';
@Component({
selector: 'app-live-clock',
template: ` <div> <h3>लाइव क्लॉक ({{ timezone }})</h3> <p>{{ currentTime }}</p> </div>
`
})
export class LiveClockComponent implements OnInit, OnDestroy {
@Input() timezone: string = 'UTC';
currentTime: string = '';
private clockSubscription!: Subscription;
ngOnInit(): void {
console.log('ngOnInit: क्लॉक शुरू हुआ');
this.clockSubscription = interval(1000).subscribe(() => {
const now = new Date();
this.currentTime = now.toLocaleTimeString('hi-IN', { timeZone: this.timezone });
});
}
ngOnDestroy(): void {
console.log('ngOnDestroy: क्लॉक बंद हो रहा है');
if (this.clockSubscription) {
this.clockSubscription.unsubscribe();
}
}
}LiveClockComponent में लाइफसाइकल हुक्स का व्यावहारिक उपयोग दिखाया गया है। ngOnInit में एक Observable Stream शुरू किया गया है जो हर सेकंड समय को अपडेट करता है। ngOnDestroy में Observable को अनसब्सक्राइब किया गया है जिससे मेमोरी लीक से बचा जा सके।
इस पैटर्न का उपयोग डैशबोर्ड्स, रीयल-टाइम ट्रैकिंग और अन्य डायनामिक इंटरफेसेस में किया जाता है। लाइफसाइकल हुक्स के माध्यम से संसाधनों का कुशल प्रबंधन और प्रदर्शन का अनुकूलन संभव होता है।
एंगुलर बेस्ट प्रैक्टिस और सामान्य गलतियाँ:
ngOnInit में डेटा इनिशियलाइज करें और ngOnDestroy में सब्सक्रिप्शन्स को साफ करें। DOM मैनिपुलेशन और इनपुट म्यूटेशन से बचें। सामान्य गलतियों में भारी लॉजिक को हुक्स में रखना, Observables को अनसब्सक्राइब न करना शामिल है। ChangeDetectionStrategy.OnPush का उपयोग और हुक्स लॉगिंग त्रुटि निवारण में सहायक है। सुरक्षा के लिए संवेदनशील डेटा को ngOnDestroy में क्लीन करें।
📊 संदर्भ तालिका
| एंगुलर Element/Concept | Description | Usage Example |
|---|---|---|
| ngOnChanges | @Input() बदलने पर ट्रिगर |
इनपुट वैल्यू चेंज हैंडल करना |
| ngOnInit | पहली बार कॉल होने पर | डेटा इनिशियलाइजेशन, सब्सक्रिप्शन स्टार्ट |
| ngDoCheck | कस्टम चेंज डिटेक्शन | कॉम्प्लेक्स लॉजिक मॉनिटरिंग |
| ngAfterViewInit | View इनिशियलाइज़ होने के बाद | DOM एलिमेंट्स और चाइल्ड कंपोनेंट्स एक्सेस |
| ngOnDestroy | कंपोनेंट डेस्टॉय होने से पहले | सब्सक्रिप्शन्स को अनसब्सक्राइब, संसाधन रिलीज़ |
सारांश और अगले कदम:
लाइफसाइकल हुक्स का सही उपयोग एंगुलर में कंपोनेंट स्टेट, डेटा फ्लो और प्रदर्शन को नियंत्रित करता है। यह पुन: उपयोग योग्य और स्थिर कंपोनेंट्स बनाने में सहायक है।
अगले कदमों में ChangeDetectionStrategy, ngAfterContentInit, ngAfterViewChecked और RxJS के उन्नत तकनीकों का अध्ययन शामिल करें। Angular DevTools के माध्यम से हुक्स की कार्यप्रणाली और प्रदर्शन का विश्लेषण कर सकते हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी