با Lifecycle Hook های انگولار آشنا شو ( پارت 1 )

یک کامپوننت در انگولار دارای چرخه ی حیات است، چرخه ی حیات یک کامپوننت همان فرایند راه اندازی کامپوننت تا قرارگیری در قالب خودش است. این چرخه ی حیات زمانی شروع می‌شود که انگولار کلاس کامپوننت خود را نمونه سازی کند. این چرخه با تشخیص تغییر مقادیر ادامه پیدا می‌کند چون انگولار مدام در حال بررسی آن است که کدام مقادیر چه زمانی تغییر کرده اند و در صورت نیاز آن هارا به روز رسانی کند این چرخه ی حیات زمانی به پایان می‌رسد که انگولار نمونه‌ی ایجاد شده‌ی کامپوننت را از بین ببرد و تمپلیت رندر شده را از DOM حذف میکند.

در برنامه های نوشته شده با انگولار می‌توان از این چرخه‌های حیات (Lifecycle Hooks) استفاده کرد تا به رویدادهای (Events) کلیدی در یک کامپوننت یا دایرکتیو برای مقداردهی اولیه نمونه‌های جدید، شروع تشخیص تغییر در صورت نیاز، پاسخ به به‌روزرسانی‌ها در حین تشخیص تغییر و پاکسازی قبل از حذف نمونه‌ها استفاده کرد.

بعد از اینکه برنامه ی شما یک کامپوننت را نمونه سازی کرد، انگولار هوک هایی رو که در جای مناسب پیاده سازی کرده اید را فراخوانی میکند.

فراخوانی متدهای هوک دارای ترتیب زیر است:

هوک 1 : ngOnChanges

متدngOnChanges یک متد ازAngular است که هنگامی که مقادیر ورودی یک دایرکتیو یا کامپوننت تغییر می‌کنند فراخوانی می‌شود. این متد برتر از متد‌های دیگری مانند constructor و ngOnInit فراخوانی می‌شود.

متد ngOnChanges یک پارامتر به نام changes دریافت می‌کند که یک SimpleChanges است. این SimpleChanges حاوی اطلاعات مفیدی در مورد تغییرات اعمال شده در مقادیر ورودی کامپوننت است. این اطلاعات شامل نام مقدار تغییر یافته، مقدار قبلی و مقدار فعلی آن است. استفاده از ngOnChanges مفید است زمانی که نیاز دارید به تغییرات مقدارهای ورودی دقت کنید و متناسب با آن رفتار کنید. مثلاً می‌توانید با استفاده از این متد، محاسبات و عملیات لازم را بر روی داده‌های جدید انجام دهید یا تغییرات را به کامپوننت والد اطلاع دهید.

برای استفاده از ngOnChanges، ابتدا متد را در کلاس کامپوننت پیاده‌سازی کنید و سپس مقدار ورودی‌هایی که تغییرات آن‌ها را می‌خواهید، بررسی کنید. در نهایت، رفتار مورد نظر خود را در این متد پیاده‌سازی کنید.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<div>Hello {{name}}!</div>`
})
export class HelloComponent implements OnChanges {
  @Input() name: string;

  ngOnChanges(changes: SimpleChanges) {
  console.log(changes.name.currentValue); // مقدار فعلی مقدار ورودی name
  console.log(changes.name.previousValue); // مقدار قبلی مقدار ورودی name
  }
}

هوک 2 : ngOnInit

متدngOnInit یک متد از Angular است که در زمانی که کامپوننت یا دایرکتیو ساخته می‌شود، فراخوانی می‌شود. این متد برای انجام تنظیمات اولیه در کامپوننت مناسب است. این هوک پس از ngOnChanges رخ داده و اگر مقادیر پیشفرضی به یک کامپوننت اختصاص داده باشیم، جایگزین خواهد شد.

متد ngOnInit از کتابخانه angular/core@ وارد شده و هیچ پارامتری دریافت نمی‌کند. برای استفاده از این متد، کافی است آن را در کلاس کامپوننت یا دایرکتیو پیاده سازی کنید و رفتار مورد نظر خود را در آن پیاده سازی کنید.

مثلاً می‌توانید در متد ngOnInit اطلاعات از سرویس‌ها را دریافت کرده، داده‌های اولیه را بازیابی کنید و تغییراتی اولیه را در کامپوننت انجام دهید.

هوک 3 : ngDoCheck

در انگولار این هوک یکی از ویژگی‌های عمده‌ای است که به شما اجازه می‌دهد تا تغییراتی که در داده‌ها و وضعیت‌ها رخ می‌دهد را در کامپوننت خود تشخیص دهید. این هوک برای مدیریت دستی تغییرات به کار می‌رود. یعنی زمانی که تغییرات به صورت اتوماتیک توسط انگولار تشخیص داده نمی‌شوند می‌توان از این هوک برای تشخصی تغییرات استفاده کرد.

وقتی یک کامپوننت به صورت دستی تغییر کرده یا تغییراتی در وضعیت‌های داخلی کامپوننت انجام شده است،ngDoCheck فراخوانی می‌شود و و تغییرات را به انگولار انتقال می‌دهد تا انگولار دوباره بتواند مجددا Change Detection را اجرا کند و نمایشگر را به روز کند.

به فرایندی که در طول آن انگولار تغییرات در داده‌ها و وضعیت‌ها را تشخیص می‌دهد و نمایشگر را به روز می‌کند، Change Detection می‌گویند. در بسیاری از برنامه‌های وب، وضعیت‌ها و داده‌ها به صورت پویا تغییر می‌کنند و باید در نتیجه این تغییرات، اطلاعات نمایش داده شده به کاربر به‌روز شود، به همین جهت انگولار برای این کار از Change Detection استفاده می‌کند.
این فرایند همیشه تضمین می‌کند که نمایشگر همیشه با وضعیت فعلی داده‌ها همخوانی داشته باشد.

بهتر است از ngDoCheck با احتیاط استفاده کرد چون اجرای مداوم آن ممکن است منجر به کاهش عملکرد شود.

import { Component, DoCheck } from '@angular/core';

 @Component({   
selector: 'app-example',
   template: '<p>{{ message }}</p>', 
}) 

export class ExampleComponent implements DoCheck { 
  message: string = 'Initial Message';   
  ngDoCheck() {     // اینجا می‌توانید تغییرات را بررسی و اعلام کنید console.log('ngDoCheck called');   } }

سپس از این کامپوننت در تمپلیتمان استفاده میکنیم:

<app-example></app-example>

وقتی که کامپوننت ExampleComponent تغییر می‌کند (مثلا مقدار message تغییر کند) یا تغییری در وضعیت‌های داخلی آن انجام شود، ngDoCheck فراخوانی می‌شود و پیام 'ngDoCheck called' در کنسول نمایش داده می‌شود.

حتما برای شما سوال پیش میاد که ngDoCheck و ngOnChanges که هردو با تغییر داده فراخوانی می‌شوند، چرا باید دو هوک مجزا برای این کار داشته باشیم؟ آیا کار هردو یکسان است؟
هر دو هوک‌ برای مدیریت تغییرات در کامپوننت‌ها و تعامل با سیستم Change Detection به کار می‌روند، اما با هدف‌ها و زمان‌های مختلفی استفاده می‌شوند.

• هوک ngDoCheck یک هوک کمی انعطاف‌پذیر‌تر است که هر بار که فرآیند Change Detection انجام می‌شود، فراخوانی می‌شود. این به این معنی است که هرگاه تغییری در داده‌ها یا وضعیت‌های کامپوننت رخ دهد و فرآیند Change Detection فعال شود، ngDoCheck نیز فراخوانی می‌شود.
• این هوک به شما اجازه می‌دهد تا تغییرات خود را در داده‌ها یا وضعیت‌های کامپوننت بررسی کنید و عملیات‌های دستی تغییرشناسی را اجرا کنید. معمولاً برای کارهایی مانند مقایسه دستی داده‌ها یا انجام عملیات‌های خاص در صورت تغییرهای خاص استفاده می‌شود.
• اگر تغییری در وضعیت‌ها یا داده‌های کامپوننت انجام نشود، ngDoCheck نیز فراخوانی می‌شود که ممکن است باعث ایجاد بار اضافی در تابع Change Detection شود.
• هوک ngOnChanges هوکی است که فقط در صورتی که ورودی‌های کامپوننت تغییر کنند، فراخوانی می‌شود. این به این معنی است که هنگامی که مقدار ورودی‌های کامپوننت تغییر کند، ngOnChanges فراخوانی می‌شود و شما می‌توانید تغییرات را بررسی کرده و به آن پاسخ دهید.
• این هوک معمولاً برای پیگیری تغییرات در ورودی‌های کامپوننت و اعمال تغییرات مرتبط با آن‌ها به نمایشگر استفاده می‌شود.

هرکدام از هوک‌ها را در چه زمانی استفاده کنیم؟
برای کار با ورودی‌ها و پیگیری تغییرات آن‌ها، بهتر است از ngOnchanges استفاده کنید. اگر نیاز دارید تغییرات دستی را بررسی کنید یا کنترل بیشتری در فرآیند Change Detection داشته باشید، می‌توانید از ngDoCheck استفاده کنید.

تا اینجای کار با 3 هوک آشنا شدید برای مطالعه ی هوک های دیگر، پارت 2 رو مطالعه کن ...