ما هي Angular Signals؟

Question

Accepted Answer

**Signals** هي الأساسيات التفاعلية في Angular (تمت إضافتها في Angular 16+) لإدارة الحالة — وهي عبارة عن غلاف حول قيمة **تخطر المستهلكين عند تغييرها**، مما يتيح تحديثات دقيقة وفعالة بدون الاعتماد على كشف التغييرات Zone.js. ## إنشاء واستخدام signal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## قراءة signal: استدعاؤه كدالة ```html ``` لاحظ أن signals يتم **قراءتها باستدعاؤها** (`count()`)، وليس كخصائص عادية. في القالب، يتتبع Angular بدقة أي signals تقرأه العرض، لذا فقط الأجزاء المتأثرة تتحدث عند تغيير signal. ## أنواع الثلاثة signals ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` كسول وموضوع في الذاكرة المؤقتة (مثل Vue's computed)؛ `effect` يقوم بتشغيل الآثار الجانبية بشكل تفاعلي (مثل watcher). ## لماذا تهم signals: التفاعلية الدقيقة ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` تمنح Signals Angular **تتبع الاعتماديات الدقيق** — عند تغيير signal، يتم تحديث فقط العروض والعمليات المحسوبة التي تقرأه بالفعل. هذا أكثر كفاءة من كشف التغييرات الواسع الذي يثيره Zone.js، وهو الأساس لإزالة Zone.js بالكامل (الوضع بدون منطقة). ## Signal-based inputs (الأحدث) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## لماذا هو مهم Signals هي التطور الأخير الأكثر أهمية في تفاعل Angular — نموذج أبسط وأكثر وضوحًا وأكثر كفاءة من كشف التغييرات الضمني Zone.js. تمكّن التحديثات الدقيقة، وتقلل من الفحص غير الضروري، وتندمج بشكل نظيف مع computed/effect، وتمهد الطريق لـ Angular بدون منطقة. فهم signals أصبح ضروريًا بشكل متزايد، حيث تتجه Angular نحو التطوير الجديد لاستخدامها كأساسية الحالة الافتراضية.