سیگنالها و افکتهای Angular
Angular نحوه مدیریت واکنشگرایی (reactivity) خود را تغییر داده است. دیگر برای تشخیص هر تغییر کوچک نیازی به Zone.js ندارید. Signals به Angular اجازه میدهند تا فقط بخشهای خاصی از رابط کاربری (UI) را که تغییر کردهاند، بهروزرسانی کند. این کار باعث سریعتر شدن اپلیکیشنهای شما شده و حالت zoneless را امکانپذیر میکند.
سیگنالها چیستند؟
یک signal ظرفی برای یک مقدار واکنشگرا است. وقتی مقدار تغییر میکند، Angular دقیقاً میداند کدام بخشهای قالب (template) را باید بهروزرسانی کند.
signal(): یک signal جدید ایجاد میکند. از.set()برای جایگزینی یک مقدار یا از.update()برای تغییر مقدار بر اساس مقدار فعلی استفاده کنید.computed(): یک signal فقطخواندنی (read-only) ایجاد میکند. مقدار آن از سایر سیگنالها مشتق میشود. Angular این مقدار را فقط زمانی که آن را میخوانید محاسبه کرده و نتیجه را کش (cache) میکند.effect(): وقتی یک signal تغییر میکند، کدی را اجرا میکند. از این برای اثرات جانبی (side effects) مانند لاگگذاری یا تغییرات دستی DOM استفاده کنید.
چه زمانی از Signals در مقابل RxJS استفاده کنیم؟
نیازی نیست یکی را انتخاب کنید. شما باید از هر دو برای وظایف مختلف استفاده کنید.
از Signals استفاده کنید برای:
- نگه داشتن وضعیت UI.
- هدایت رندرینگ قالب.
- جایگزینی
@Input()و@Output(). - کار در اپلیکیشنهای zoneless.
از RxJS استفاده کنید برای:
- مدیریت جریانهای ناهمگام (async streams) مانند HTTP یا WebSockets.
- منطقهای پیچیده مانند debouncing یا تغییر جریانها (switching streams).
- ترکیب چندین توالی رویداد (event sequences).
میتوانید با استفاده از rxjs-interop آنها را به هم متصل کنید:
toSignal(): تبدیل یک Observable به یک Signal.toObservable(): تبدیل یک Signal به یک Observable.
APIهای جدید بدون Decorator
نسخههای Angular 17 به بالا، روشهای جدیدی را برای مدیریت جریان داده بدون استفاده از decoratorها معرفی کردهاند.
input(): یک signal فقطخواندنی برای دادههایی که از یک کامپوننت والد میآیند.model(): یک signal نوشتنی برای اتصال دوطرفه (two-way binding). این جایگزین الگوی قدیمی@Input()و@Output()میشود.output(): روشی برای ارسال رویدادها از فرزند به والد. این یک signal نیست، اما کد شما را سادهتر میکند.
چرا این روش بهتر از React است؟
اگر با React آشنایی دارید، مفاهیم مشابه هستند اما نحوه اجرا متفاوت است.
- ردیابی خودکار: در React، باید وابستگیها (dependencies) را در یک آرایه لیست کنید. در Angular، سیستم بهطور خودکار ردیابی میکند که از کدام سیگنالها استفاده میکنید. شما نمیتوانید وابستگیای را فراموش کنید.
- بهروزرسانیهای دقیق: React اغلب کل کامپوننتها را دوباره رندر میکند. سیگنالهای Angular فقط گرههای (nodes) خاصی از DOM را که به آن مقدار وابسته هستند، بهروزرسانی میکنند.
- عدم وجود Stale Closures: سیگنالها همیشه وقتی آنها را فراخوانی میکنید، مقدار فعلی را ارائه میدهند.
منبع: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn