Angular Academy · درس

تحسين القوائم والعرض

سرّع القوائم الكبيرة باستخدام التتبع

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

أهمية عرض القوائم

تُعد القوائم أكثر مواضع الأداء تعرضًا للمشكلات. فأثناء إعادة عرض قائمة كاملة عند كل تغيير، يُهدر العمل وتُعاد تهيئة حالة DOM. يوفّر Angular أدوات لعرض القوائم بكفاءة.

كتلة @for

تتطلب بنية التحكم المضمنة @for تعبير track كي يتمكن Angular من تحديد كل عنصر عبر التحديثات.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

سبب ضرورة track

من دون هوية مستقرة، لا يستطيع Angular معرفة العناصر التي تحركت أو أضيفت أو أزيلت. يربط track كل عقدة معروضة ببياناتها، فيعيد استخدام DOM بدلًا من إعادة إنشائه.

التتبع حسب الهوية

استخدم مفتاحًا فريدًا ومستقرًا مثل id. تجنب track $index في القوائم التي يعاد ترتيبها، لأن تغيّر الفهرس يسبب تغييرات غير ضرورية في DOM.

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

متى يكون track $index مناسبًا

إذا لم تكن للعناصر معرّفات فريدة ولم يُعَد ترتيبها مطلقًا (مثل السجلات التي تُضاف إليها عناصر فقط)، فيُعد track $index مقبولًا.

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

‏trackBy القديمة

مع *ngFor الأقدم، توفّر دالة trackBy تُرجع مفتاحًا مستقرًا.

trackById(index: number, item: Item) {
  return item.id;
}

‏trackBy في القالب

أشِر إلى الدالة في الصياغة المصغّرة لـ *ngFor.

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

حالتا الفراغ والتحميل

تدعم @for كتلة @empty عندما تكون المجموعة فارغة، مما يلغي الحاجة إلى عمليات تحقق إضافية باستخدام *ngIf.

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

تجنب استدعاءات الدوال في الروابط

تُشغَّل الدوال الموجودة في القوالب عند كل عملية تحقق. احسب القيم مسبقًا داخل Signals أو حقول مخزنة مؤقتًا بدلًا من استدعاء الأساليب في أجسام @for.

OnPush + القوائم غير القابلة للتغيير

ادمج OnPush مع إنشاء مراجع مصفوفات جديدة عند كل تغيير. ومع استخدام track بطريقة صحيحة، يحدّث Angular الصفوف التي تغيّرت فعليًا فقط.

this.items.update(list => [...list, newItem]);

التمرير الافتراضي

بالنسبة إلى القوائم الكبيرة جدًا، اعرض الصفوف المرئية فقط باستخدام CDK ‏cdk-virtual-scroll-viewport، مع إبقاء DOM صغيرًا بغض النظر عن حجم البيانات.

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

تحقق سريع

اختبر مدى فهمك لتحسين القوائم.

مراجعة

تعلّمت تحسين القوائم باستخدام @for ... track (أو trackBy القديمة) مع مفاتيح مستقرة، وكتلة @empty، وتحديثات غير قابلة للتغيير مع OnPush، والتمرير الافتراضي للمجموعات الكبيرة جدًا.

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

هل درس «تحسين القوائم والعرض» مجاني؟

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

ماذا ستتعلم في «تحسين القوائم والعرض»؟

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

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

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

كم من الوقت يستغرق درس «تحسين القوائم والعرض»؟

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

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

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

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

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