Angular Academy · درس

تحديث الإشارات باستخدام set وupdate

غيّروا قيم الإشارات بطريقة تفاعلية

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

تغيير إشارة

يمكن تغيير الإشارة القابلة للكتابة بطريقتين: استخدام set() لاستبدال القيمة، واستخدام update() لاشتقاق قيمة جديدة من القيمة الحالية.

استخدام set()

يستبدل set(newValue) قيمة الإشارة بالكامل بالقيمة التي تمررونها.

const c = signal(0);
c.set(1);
console.log(c()); // 1

متى نستخدم set()؟

استخدموا set() عندما لا تعتمد القيمة الجديدة على القديمة، مثل إسناد قيمة جديدة من إدخال المستخدم أو من استجابة API.

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

استخدام update()

تأخذ update(fn) دالةً تستقبل القيمة الحالية وتعيد القيمة الجديدة. وهي مثالية عندما تعتمد القيمة التالية على القيمة السابقة.

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

الزيادة باستخدام update()

يستخدم العداد التقليدي update() لزيادة العدد الحالي.

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

تحديث الكائنات بطريقة غير قابلة للتغيير

نظرًا إلى أن اكتشاف التغييرات يقارن المراجع، استبدلوا الكائنات بدلًا من تعديلها. وانشروا القيمة القديمة داخل كائن جديد.

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

تحديث المصفوفات بطريقة غير قابلة للتغيير

بالنسبة إلى المصفوفات، أعيدوا مصفوفة جديدة. تجنبوا استخدام push/splice على المصفوفة الحالية، واستخدموا الانتشار أو أساليب المصفوفات التي تعيد مصفوفات جديدة.

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

ملخص set() مقابل update()

set: لديكم القيمة النهائية بالفعل. update: تحسبون القيمة النهائية انطلاقًا من القيمة الحالية. ويُخطر كلاهما المستهلكين إذا تغيّرت القيمة فعليًا.

مساواة المراجع والتغيير

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

const c = signal(5);
c.set(5); // no change, dependents not notified

لا يُنصح بالتعديل المباشر

كانت واجهات API الأقدم تتضمن أسلوب mutate()، لكن النهج الحديث الموصى به هو إجراء تحديثات غير قابلة للتغيير باستخدام set() وupdate() مع إعادة مراجع جديدة.

تحديث الإشارات في الأساليب

في المكوّنات، ضعوا تحديثات الإشارات داخل أساليب يمكن للقالب استدعاؤها من معالجات الأحداث.

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

اختبار سريع: set مقابل update

اختَر الأداة المناسبة للمهمة.

مراجعة: تحديث Signals

تعلّمت استخدام set() لاستبدال قيمة، واستخدام update(fn) لاشتقاق قيمة جديدة من القيمة الحالية. كما رأيت كيفية تحديث الكائنات والمصفوفات بطريقة غير قابلة للتغيير، بحيث تكشف مساواة المراجع عن التغيير. التالي: استخدام signals مباشرةً في القوالب.

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

هل درس «تحديث الإشارات باستخدام set وupdate» مجاني؟

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

ماذا ستتعلم في «تحديث الإشارات باستخدام set وupdate»؟

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

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

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

كم من الوقت يستغرق درس «تحديث الإشارات باستخدام set وupdate»؟

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

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

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

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

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