Angular Academy · درس

اشتقاق الحالة باستخدام computed

أنشئ نماذج قراءة من الحالة الأساسية

اشتقاق الحالة باستخدام computed درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

الحالة المشتقة

غالبًا ما تُحسب الحالة من حالات أخرى: إجمالي من العناصر، أو قائمة مفلترة، أو مؤشر صلاحية. تنشئ computed() في Angular إشارة للقراءة فقط، تُشتق قيمتها من إشارات أخرى.

إنشاء computed

مرّروا دالة إلى computed(). تقرأ الدالة إشارات أخرى وتعيد قيمة. وتُعاد معالجة النتيجة فقط عند تغير أحد تبعياتها.

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

التتبع التلقائي للتبعيات

لا تحتاجون إلى التصريح بالتبعيات. فأي إشارات تقرؤونها داخل الدالة تصبح تبعيات تلقائيًا. عند تغيير qty، يُعاد حساب total؛ أما عند تغيير إشارة غير مرتبطة، فلا يحدث ذلك.

الحفظ المؤقت

تخزّن computed() نتيجتها مؤقتًا. فعند قراءتها مرات عديدة، تُشغّل الدالة مرة واحدة إلى أن تتغير إحدى التبعيات. وهذا يجعل نماذج القراءة المشتقة منخفضة التكلفة حتى عند الوصول إليها من روابط قالب متعددة.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

استخدام computed داخل مخزن

داخل مخزن الإشارات، أتيحوا نماذج قراءة محسوبة حتى تستهلك المكونات قيمًا جاهزة للعرض بدلًا من إعادة حسابها داخل القوالب.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

تسلسل computed

يمكن للإشارات المحسوبة قراءة إشارات محسوبة أخرى. ابنوا نماذج قراءة متعددة الطبقات، بحيث يغذي اشتقاق أساسي نموذجًا أعلى مستوى.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

التصفية والبحث

من نماذج القراءة الشائعة تصفية قائمة باستخدام إشارة بحث. وتتحدث النتيجة المفلترة كلما تغيرت القائمة أو الاستعلام.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

لا توجد تأثيرات جانبية

يجب أن تكون دالة computed() نقية: تقرأ الإشارات فقط وتعيد قيمة. لا تعدّلوا الحالة، ولا تستدعوا واجهات برمجة التطبيقات، ولا تكتبوا إلى إشارات أخرى داخلها. استخدموا effect() بدلًا من ذلك للتأثيرات الجانبية.

المساواة وتخطي التحديثات

يستخدم computed افتراضيًا المساواة المرجعية (Object.is) لتحديد ما إذا كانت القيمة قد تغيرت. وإذا كانت القيمة الجديدة مساوية للقديمة، فلا يُخطر المستهلكون، مما يتجنب العمل غير الضروري.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

استخدام computed في القوالب

اقرؤوا الإشارات المحسوبة في القوالب كما تقرؤون أي إشارة. ويحدّث Angular الروابط التي تغيرت قيمتها المحسوبة فعلًا فقط.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

computed في مقابل الأساليب

استخدموا computed() للقيم المشتقة من الحالة والتي ينبغي أن تتحدث تلقائيًا وأن تُحفظ مؤقتًا. واستخدموا أسلوبًا عاديًا للحسابات التي تُجرى مرة واحدة، أو التي تتلقى معاملات، أو التي ينبغي تشغيلها عند الطلب.

اختبار سريع

اختبروا فهمكم للإشارات المحسوبة.

خلاصة

بنيتم حالة مشتقة باستخدام computed()، مع التتبع التلقائي للتبعيات، والدوال النقية المحفوظة مؤقتًا، ونماذج القراءة القابلة للتسلسل، وتخطي التحديثات اعتمادًا على المساواة. أتيحوا نماذج القراءة المحسوبة من المخازن لتحافظ القوالب على طابعها التصريحي.

الأسئلة الشائعة

هل درس «اشتقاق الحالة باستخدام computed» مجاني؟

نعم — نص درس «اشتقاق الحالة باستخدام computed» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «اشتقاق الحالة باستخدام computed»؟

أنشئ نماذج قراءة من الحالة الأساسية تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «اشتقاق الحالة باستخدام computed»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy