Angular Academy · درس

تحديث الحالة دون تغييرها

طبّق تحديثات غير قابلة للتغيير على حالة الإشارة

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

لماذا عدم القابلية للتغيير

تكتشف الإشارات التغيير بالمرجع. فإذا عدّلتم مصفوفة أو كائنًا في مكانه، ظل المرجع نفسه، وقد لا تعيد الإشارات computed() التابعة حسابها. أنشئوا دائمًا مرجعًا جديدًا.

فخ التعديل المباشر

يؤدي إدخال عنصر إلى مصفوفة موجودة إلى تعديلها من دون تغيير المرجع. تجنبوا ذلك.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

استخدام spread للمصفوفات

أنشئوا مصفوفة جديدة باستخدام معامل spread حتى يتغير المرجع وتعيد العناصر المستهلكة التنفيذ.

// GOOD: new array reference
this._items.update(list => [...list, item]);

إزالة العناصر

استخدموا filter()، إذ يعيد مصفوفة جديدة تمامًا ويترك الأصلية دون تغيير.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

تحديث عنصر واحد

استخدموا map() لإعادة مصفوفة جديدة، مع نسخ الكائن المطابق إلى نسخة جديدة باستخدام spread، حتى يتغير المرجع الداخلي أيضًا.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

استخدام spread للكائنات

بالنسبة إلى حالة الكائنات، انسخوا الكائن السابق باستخدام spread واستبدلوا الحقول المتغيرة. وتحتاج الكائنات المتداخلة إلى استخدام spread خاص بها أيضًا.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

set مع قيمة جديدة

عند استبدال الحالة بالكامل، يكون استخدام set() مع كائن جديد غير قابل للتغيير بطبيعته، لأنكم تقدمون مرجعًا جديدًا.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

سبب اعتماد computed عليه

بما أن نماذج القراءة المحسوبة تعتمد على مرجع الإشارة، تضمن التحديثات غير القابلة للتغيير إعادة حسابها. وقد يؤدي تعديل يحافظ على مرجع المصفوفة نفسه إلى ترك الإجماليات والمرشحات قديمة دون ملاحظة.

أنماط المساعدات

استخرجوا مساعدات صغيرة ونقية للتحويلات الشائعة، حتى تظل أساليب المخزن قابلة للقراءة ومتسقة.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

الحذر من التداخل العميق

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

الثباتية تساعد على تصحيح الأخطاء

بما أن كل تحديث يُنتج مرجعًا جديدًا، يمكنكم مقارنة اللقطات عبر الزمن، وتسجيل الحالة السابقة مقابل التالية، وتحليل التغييرات دون القلق بشأن التعديلات الخفية داخل المكان نفسه.

اختبار سريع

اختبروا مدى استيعابكم لتحديثات الإشارات الثابتة.

مراجعة

تعلّمتم أنماط التحديث الثابتة: استخدام spread للمصفوفات والكائنات، وmap/filter للتعديل والإزالة، وإنشاء مراجع جديدة عبر set، وفهم سبب جعل مساواة المراجع للثباتية أمرًا ضروريًا لتحقيق تفاعلية صحيحة.

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

هل درس «تحديث الحالة دون تغييرها» مجاني؟

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

ماذا ستتعلم في «تحديث الحالة دون تغييرها»؟

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

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

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

كم من الوقت يستغرق درس «تحديث الحالة دون تغييرها»؟

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

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

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

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

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