Angular Academy · درس

Pipes النقية مقابل غير النقية

افهموا سلوك اكتشاف التغييرات في Pipes

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

Pipes نقية افتراضيًا

كل Pipe تكون نقية افتراضيًا. ولا تُعاد Pipe النقية إلى التنفيذ إلا عند تغيّر قيمة مدخلاتها أو وسائطها بالمرجع.

لماذا تكون Pipes النقية سريعة؟

تتخطى Angular استدعاء Pipe النقية أثناء اكتشاف التغييرات إذا لم يتغير مرجع المدخل. وهذا ما يجعل Pipes النقية فعّالة.

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

التغيّر في المرجع مقابل التغيّر في القيمة

ترصد Pipes النقية تغيّرات المرجع. ولا يؤدي تعديل مصفوفة في مكانها إلى تشغيل Pipe نقية، لأن مرجع المصفوفة يظل كما هو.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

تعريف Pipe غير نقية

عيّن pure: false في مزيّن @Pipe لجعل Pipe غير نقية. وتُشغَّل Pipe غير النقية في كل دورة لاكتشاف التغييرات.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

متى تستخدم Pipes غير النقية؟

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

تكلفة Pipes غير النقية

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

Pipe المسماة async غير نقية

Pipe المضمّنة async غير نقية. فهي تشترك في Observable أو Promise وتحدّث العرض عند وصول قيم جديدة.

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

تلغي Pipe المسماة async الاشتراك تلقائيًا

من أهم فوائد Pipe المسماة async إلغاء الاشتراك تلقائيًا عند إتلاف المكوّن، مما يمنع تسرّبات الذاكرة.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

تجنب التعديل مع Pipes النقية

للحفاظ على عمل Pipes النقية مع المجموعات، تعامل مع البيانات على أنها غير قابلة للتغيير: أنشئ مصفوفات وكائنات جديدة بدلًا من تعديل الموجودة.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

اختيار Pipe نقية أم غير نقية

فضّل Pipes النقية لسلوك سريع ويمكن التنبؤ به. ولا تلجأ إلى غير النقية إلا عندما تحتاج فعلًا إلى الاستجابة للتعديلات. وغالبًا ما يغني إعادة التصميم باستخدام بيانات غير قابلة للتغيير عن Pipes غير النقية تمامًا.

أفضل ممارسات Pipes غير النقية

إذا اضطررت إلى استخدام Pipe غير نقية، فاحفظ النتائج مؤقتًا حتى لا تعيد حسابها عندما لا تتغير المدخلات.

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

تحقق سريع

اختبر مدى فهمك لـ Pipes النقية وغير النقية.

مراجعة

تُشغَّل Pipes النقية عند تغيّر المراجع فقط وتتميز بالسرعة، بينما تُشغَّل Pipes غير النقية (pure: false) في كل دورة وتناسب البيانات القابلة للتعديل. أما Pipe المسماة async فهي غير نقية وتلغي الاشتراك تلقائيًا.

فضّل البيانات غير القابلة للتغيير حتى تظل Pipes النقية فعّالة.

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

هل درس «Pipes النقية مقابل غير النقية» مجاني؟

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

ماذا ستتعلم في «Pipes النقية مقابل غير النقية»؟

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

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

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

كم من الوقت يستغرق درس «Pipes النقية مقابل غير النقية»؟

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

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

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

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

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