لیست ها (Lists)

در React، لیست ها در React یعنی نمایش چند آیتم شبیه به هم پشت سر هم. مثل فهرست نمره های امتحان یا اسامی دوستانت در یک چت لیست.

ساخت لیست ها در React با map()

برای ساخت لیست ها در React معمولاً از متد map() روی آرایه استفاده می کنیم. متد map() (متد تبدیل آرایه) روی هر عنصر آرایه یک تابع اجرا می کند و یک آرایه جدید می سازد.

در JSX می توانیم نتیجه map() را به صورت مجموعه ای از تگ های <li> برگردانیم. این دقیقاً شبیه این است که روی هر نام ماشین حلقه بزنی و برایش یک خط جدید بنویسی.

function MyCars() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>My Cars:</h1>
      <ul>
        {cars.map((car) => {
          return (
            <li>I am a {car}</li>
          );
        })}
      </ul>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <MyCars />
);

مشاهده در ادیتور

این کد در محیط React کار می کند؛ اما یک هشدار درباره نداشتن key برای آیتم های لیست نشان می دهد. حالا در بخش بعدی می بینی چرا این هشدار مهم است.

کلیدها (Keys) در لیست های React

کلید (Key) یک شناسه یکتا برای هر آیتم لیست است. React با کمک کلیدها می فهمد کدام آیتم تغییر کرده یا حذف شده تا فقط همان را دوباره رندر کند.

کلید باید بین خواهرها (آیتم های یک لیست) یکتا باشد. اما لازم نیست در کل برنامه یکتا باشد؛ فقط در همان لیست کافی است.

نکته: بهترین انتخاب برای key یک id واقعی روی داده است؛ مثل شماره دانش آموزی یا شناسه محصول.

function MyCars() {
  const cars = [
    { id: 1001, brand: 'Ford' },
    { id: 1002, brand: 'BMW' },
    { id: 1003, brand: 'Audi' }
  ];
  return (
    <>
      <h1>My Cars:</h1>
      <ul>
        {cars.map((car) => {
          return (
            <li key={car.id}>I am a {car.brand}</li>
          );
        })}
      </ul>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <MyCars />
);

مشاهده در ادیتور

اینجا هر ماشین یک id یکتا دارد. وقتی لیست تغییر کند، React با دیدن key={car.id} سریع تشخیص می دهد کدام <li> عوض شده است.

گام به گام ساخت لیست با key

1. برای هر آیتم یک id یکتا در نظر بگیر.
2. آرایه اشیا بساز؛ هر شیء شامل id و داده اصلی باشد.
3. روی آرایه map() بزن و برای هر آیتم یک <li> بساز.
4. روی تگ <li> یک پراپس key با مقدار id تنظیم کن.

استفاده از index آرایه به عنوان key

گاهی آیتم ها id ندارند. در این حالت می توانی از index آرایه به عنوان key استفاده کنی. index همان شماره ردیف است؛ مثل شماره صندلی در کلاس.

هشدار: استفاده از index فقط وقتی خوب است که لیست ثابت باشد. اگر لیست مرتب سازی، حذف یا فیلتر شود، indexها جا به جا می شوند و React گیج می شود.

function MyCars() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>My Cars:</h1>
      <ul>
        {cars.map((car, index) => {
          return (
            <li key={index}>I am a {car}</li>
          );
        })}
      </ul>
    </>
  );
}

createRoot(document.getElementById("root")).render(
  <MyCars />
);

مشاهده در ادیتور

این روش برای لیست هایی مناسب است که تغییر نمی کنند. مثلاً یک جدول ثابتِ ساعات زنگ های مدرسه که همیشه یکسان است و آیتم جدید وسطش اضافه نمی کنی.

کی از index به عنوان key استفاده کنیم؟

• وقتی لیست واقعاً ثابت است و تغییر نمی کند.
• وقتی لیست مرتب یا فیلتر نمی شود.
• وقتی آیتم ها id واقعی ندارند و مجبور هستی.

جمع بندی سریع لیست ها (Lists)

• لیست ها در React معمولاً با متد map() ساخته می شوند.
• برای هر آیتم لیست حتماً یک key یکتا تنظیم کن.
• بهتر است key از نوع id واقعی داده باشد.
• index آرایه فقط برای لیست های ثابت گزینه قابل قبول است.
• برای مرور دوباره لیست ها در React همیشه می توانی به همین صفحه برگردی.