هک‌های چرخه حیات
هک‌های چرخه حیات در انگولار متدهای خاصی هستند که به توسعه‌دهندگان اجازه می‌دهند تا در مراحل مختلف عمر یک کامپوننت (Component) ورود کنند و رفتار آن را مدیریت کنند. این هک‌ها در کنترل جریان داده، مدیریت وضعیت و بهینه‌سازی عملکرد برنامه‌های مدرن تک‌صفحه‌ای (SPA) نقش حیاتی دارند.
در انگولار، هک‌هایی مانند ngOnInit، ngOnChanges، ngAfterViewInit و ngOnDestroy وجود دارند. ngOnInit برای مقداردهی اولیه داده‌ها و آغاز Subscriptions کاربرد دارد. ngOnChanges هر بار که یک @Input() تغییر می‌کند، اجرا می‌شود. ngAfterViewInit برای دسترسی به DOM یا کامپوننت‌های فرزند استفاده می‌شود و ngOnDestroy برای آزادسازی منابع و لغو Subscriptions کاربرد دارد.
در این آموزش، شما یاد می‌گیرید که چگونه با استفاده از هک‌های چرخه حیات، کامپوننت‌های قابل استفاده مجدد بسازید، جریان داده‌ها را مدیریت کنید و عملکرد برنامه را بهینه کنید. همچنین با اشتباهات رایج مانند prop drilling، رندرهای غیرضروری و تغییرات مستقیم state آشنا خواهید شد و روش‌های جلوگیری از آنها را فرا خواهید گرفت.
مثال پایه
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('Constructor: کامپوننت ایجاد شد');
}
ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges: تغییر ورودی', changes);
}
ngOnInit(): void {
console.log('ngOnInit: کامپوننت مقداردهی اولیه شد');
this.status = 'فعال';
}
ngOnDestroy(): void {
console.log('ngOnDestroy: کامپوننت در حال تخریب است');
}
}در این مثال، UserProfileComponent از هک‌های چرخه حیات استفاده می‌کند. کونسرتور فقط برای ایجاد کامپوننت فراخوانی می‌شود و نباید شامل منطق سنگین باشد. ngOnChanges هر بار که مقدار @Input() تغییر می‌کند، اجرا می‌شود و به توسعه‌دهنده امکان می‌دهد به تغییر داده‌ها واکنش نشان دهد.
ngOnInit برای مقداردهی اولیه داده‌ها و آغاز Subscriptions مناسب است و ngOnDestroy منابع را آزاد و Subscriptions را لغو می‌کند. استفاده صحیح از این هک‌ها باعث می‌شود کامپوننت‌ها قابل استفاده مجدد، پایدار و بهینه باشند و از مشکلاتی مانند رندرهای غیرضروری یا نشت حافظه جلوگیری شود.
مثال کاربردی
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('fa-IR', { timeZone: this.timezone });
});
}
ngOnDestroy(): void {
console.log('ngOnDestroy: ساعت متوقف شد');
if (this.clockSubscription) {
this.clockSubscription.unsubscribe();
}
}
}در LiveClockComponent، هک‌های چرخه حیات برای مدیریت جریان داده‌ها و منابع استفاده شده‌اند. ngOnInit یک Observable راه‌اندازی می‌کند که هر ثانیه زمان را به‌روزرسانی می‌کند و ngOnDestroy این Observable را لغو می‌کند تا از نشت حافظه جلوگیری شود. این الگو برای داشبوردها، برنامه‌های زمان واقعی و رابط‌های پویا کاربرد دارد و استفاده صحیح از هک‌ها باعث مدیریت بهینه منابع و افزایش عملکرد می‌شود.
بهترین شیوه‌ها و اشتباهات رایج در انگولار:
- مقداردهی اولیه داده‌ها در
ngOnInitو لغو Subscriptions درngOnDestroy - جلوگیری از دستکاری مستقیم DOM و تغییر مستقیم state
- پرهیز از قرار دادن منطق سنگین در هک‌ها
- استفاده از
ChangeDetectionStrategy.OnPushبرای بهینه‌سازی رندر - پاکسازی داده‌های حساس در
ngOnDestroyبرای امنیت برنامه
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| ngOnChanges | فراخوانی هنگام تغییر @Input() |
کنترل تغییرات ورودی |
| ngOnInit | اولین بار هنگام مقداردهی اولیه | مقداردهی داده‌ها، شروع Subscriptions |
| ngDoCheck | کنترل تغییرات سفارشی | نظارت بر منطق پیچیده |
| ngAfterViewInit | پس از مقداردهی view | دسترسی به DOM و کامپوننت‌های فرزند |
| ngOnDestroy | قبل از تخریب کامپوننت | لغو Subscriptions، آزادسازی منابع |
خلاصه و مراحل بعدی:
استفاده صحیح از هک‌های چرخه حیات در انگولار باعث مدیریت بهینه وضعیت، کنترل جریان داده‌ها و بهبود عملکرد کامپوننت‌ها می‌شود. این هک‌ها پایه‌ای برای ساخت کامپوننت‌های قابل استفاده مجدد و پایدار فراهم می‌کنند.
مراحل بعدی شامل مطالعه ChangeDetectionStrategy، ngAfterContentInit، ngAfterViewChecked و تکنیک‌های پیشرفته RxJS است. با استفاده از ابزارهایی مانند Angular DevTools می‌توانید عملکرد هک‌ها و رفتار کامپوننت‌ها را تحلیل و بهینه‌سازی کنید.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود