Frontend Academy · درس

القوائم والمفاتيح والتصيير الشرطي

صيّر مصفوفات من العناصر باستخدام .map()، وقدّم خصائص key ثابتة، وصيّر العناصر شرطيًا باستخدام && والعامل الثلاثي.

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

عرض القوائم باستخدام .map()

اعرض قائمة ديناميكية باستدعاء .map() على مصفوفة وإعادة JSX لكل عنصر. يعرض React مصفوفة من العناصر كما يعرض عنصرًا واحدًا.

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

الخاصية key — لماذا تهم؟

إن key خاصية React خاصة تساعده على تحديد العناصر التي تغيّرت أو أُضيفت أو أُزيلت من القائمة. ومن دون مفاتيح، أو عند استخدام مفاتيح غير مستقرة مثل الفهارس، قد ينتج React تحديثات غير صحيحة.

المفاتيح الجيدة والسيئة

المفاتيح الجيدة: معرّفات فريدة ومستقرة من بياناتك، مثل item.id. المفاتيح السيئة: فهارس المصفوفة، إذ قد يُعاد ترتيب العناصر، أو القيم العشوائية، إذ تتغير عند كل إعادة عرض.

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

عرض الكائنات

حوّل مصفوفة من الكائنات إلى مكوّنات، وفكّك الكائن إلى props.

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

العرض الشرطي باستخدام &&

استخدم عامل الاختصار && لإدراج JSX بشكل شرطي. إذا كان الطرف الأيسر زائفًا، فلن يُعرض شيء. انتبه إلى الأعداد الزائفة؛ إذ يُعرض 0 على هيئة «0».

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

العرض الشرطي باستخدام العامل الثلاثي

استخدم العامل الثلاثي لعرض أحد عنصرين بناءً على شرط.

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

العرض الشرطي باستخدام عبارة if

للتعامل مع الشروط المعقدة، استخدم عبارة if قبل return. وأعد القيمة مبكرًا في حالات التحميل أو الخطأ.

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

التصفية قبل التعيين

صفِّ المصفوفة قبل إجراء التعيين لعرض العناصر المطابقة فقط. وهذا أسلوب واضح وسهل القراءة.

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

الحالة الفارغة

تعامل دائمًا مع حالة المصفوفة الفارغة. فعرض قائمة فارغة بصمت أمر مربك؛ اعرض بدلًا من ذلك رسالة مفيدة للحالة الفارغة.

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

بوابات العرض للقوائم

يمكن للقوائم الطويلة التي يجب أن تظهر في عقدة DOM مختلفة، مثل القائمة المنسدلة، استخدام ReactDOM.createPortal. لكن عرض معظم القوائم يتم مباشرةً داخل شجرة المكوّنات.

القوائم الافتراضية لتحسين الأداء

بالنسبة إلى القوائم الطويلة جدًا، التي تضم 1,000 عنصر أو أكثر، استخدم مكتبة للقوائم الافتراضية مثل react-window أو @tanstack/react-virtual. إذ تعرض هذه المكتبات الصفوف المرئية فقط، مما يتجنب مشكلات أداء DOM.

تحقق سريع

متى يكون من المقبول استخدام فهرس المصفوفة بوصفه key في قوائم React؟

مراجعة: القوائم والعرض الشرطي

اعرض القوائم باستخدام .map(). أضف دائمًا خصائص key ثابتة وفريدة. استخدم && للعناصر الاختيارية، وانتبه إلى القيمة 0. استخدم العامل الثلاثي للحالتين البديلتين. استخدم عمليات الإرجاع المبكر لحالتي التحميل والخطأ. نفّذ التصفية قبل استخدام map للقوائم الشرطية. اعرض رسالة تفيد بعدم وجود عناصر للمصفوفات الفارغة. استخدم القوائم الافتراضية للقوائم الطويلة جدًا.

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

هل درس «القوائم والمفاتيح والتصيير الشرطي» مجاني؟

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

ماذا ستتعلم في «القوائم والمفاتيح والتصيير الشرطي»؟

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

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

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

كم من الوقت يستغرق درس «القوائم والمفاتيح والتصيير الشرطي»؟

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

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

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

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

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