Angular Academy · درس

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

استجيبوا لتغييرات الإشارات باستخدام التأثيرات

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

ما التأثير

يشغّل effect() دالة كلما تغيرت أي إشارة يقرؤها. وعلى خلاف الإشارة المحسوبة، تُستخدم التأثيرات من أجل الآثار الجانبية: التسجيل، والمزامنة مع localStorage، واستدعاء واجهات API، ومعالجة DOM.

لا تُرجع التأثيرات قيمة.

إنشاء تأثير

يُشغَّل التأثير مرة واحدة فورًا، ثم يُعاد تشغيله في كل مرة تتغير فيها إشارة متتبَّعة.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

تحتاج التأثيرات إلى سياق حقن

افتراضيًا، يجب إنشاء effect() داخل سياق حقن — وعادةً ما يكون ذلك في مُنشئ أو مُهيّئ حقل لمكوّن أو توجيه أو خدمة.

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

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

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

مثل الإشارات المحسوبة، تتتبع التأثيرات الإشارات التي تقرؤها أثناء التشغيل بدقة. ولا تُتتبَّع القراءات الشرطية إلا عند الوصول إليها.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

مزامنة الإشارات مع localStorage

من حالات الاستخدام التقليدية للتأثير: حفظ الحالة بشكل دائم كلما تغيرت.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

لا تُرجع التأثيرات قيمًا

إذا كنت تحتاج إلى قيمة مشتقة، فاستخدم computed(). فالتأثيرات مخصصة للإجراءات التي لا تُرجع قيمة؛ ونتيجتها هي الأثر الجانبي نفسه.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

تعيين الإشارات داخل التأثيرات

يمنع Angular كتابة القيم إلى الإشارات داخل التأثير افتراضيًا لتجنب الحلقات. وإذا كنت تحتاج إلى ذلك فعلًا، فمرّر { allowSignalWrites: true } — لكن يُفضّل استخدام computed للقيم المشتقة.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

التنظيف اليدوي باستخدام EffectRef

تُرجع effect() كائنًا من النوع EffectRef. استدعِ .destroy() لإيقافه يدويًا قبل تدمير المالك.

import { effect, EffectRef } from '@angular/core';

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

تُنظَّف التأثيرات تلقائيًا

عند إنشاء تأثير داخل مكوّن، يُدمَّر التأثير تلقائيًا عند تدمير المكوّن. ونادرًا ما تحتاج إلى استدعاء .destroy() بنفسك.

تُشغَّل التأثيرات بعد العرض

تُجدول التأثيرات وتُشغَّل بعد اكتشاف التغييرات، وتُجمَّع في كل مهمة دقيقة. وتؤدي التغييرات المتزامنة المتعددة في الإشارات إلى تشغيل التأثير مرة واحدة فقط.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

متى تستخدم effect مقابل computed

computed: اشتقاق قيمة من الإشارات (بصورة نقية).
effect: الاستجابة للإشارات بتنفيذ إجراء خارجي (بصورة غير نقية).

إذا وجدت نفسك تُرجع قيمة من تأثير، فغالبًا ما تحتاج إلى computed.

تحقق سريع

اختبر مدى فهمك للتأثيرات.

مراجعة: التأثيرات

يشغّل effect() دالة كلما تغيرت الإشارات التي يتتبعها، وذلك من أجل الآثار الجانبية فقط.

يُشغَّل مرة واحدة فورًا، ثم عند كل تغير في التبعيات.
يحتاج إلى سياق حقن.
يُدمَّر تلقائيًا مع مالكه؛ ويُرجع EffectRef للتحكم اليدوي.
استخدم computed للاشتقاقات، وeffect للإجراءات.

التالي: تنظيف الموارد داخل التأثيرات.

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

هل درس «التأثيرات والآثار الجانبية» مجاني؟

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

ماذا ستتعلم في «التأثيرات والآثار الجانبية»؟

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

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

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

كم من الوقت يستغرق درس «التأثيرات والآثار الجانبية»؟

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

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

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

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

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