درک key های منحصر به فرد برای فرزندان آرایه‌ ها در React.js

در React، وقتی که با آرایه‌ها و لیست‌ها کار می‌کنید، استفاده از کلیدهای یکتا برای هر عنصر درون آرایه خیلی مهمه. این کلیدها کمک می‌کنن که React بتونه هر عنصر رو شناسایی و مدیریت کنه، به خصوص وقتی که عناصر تغییر می‌کنن، اضافه می‌شن یا حذف می‌شن.

چرا کلیدهای یکتا مهم هستن؟

کلیدها به React کمک می‌کنن که تفاوت بین عناصر مشابه رو بفهمه. وقتی که لیست شما تغییر می‌کنه، React از این کلیدها برای شناسایی و مدیریت تغییرات استفاده می‌کنه تا بتونه بهترین و کارآمدترین راه رو برای به‌روزرسانی DOM انتخاب کنه. بدون کلید یکتا، React ممکنه نتونه به درستی تغییرات رو پیگیری کنه و این می‌تونه به مشکلاتی مثل افت عملکرد یا به‌روزرسانی نادرست منجر بشه.

چگونه کلیدهای یکتا رو انتخاب کنیم؟

1. استفاده از شناسه‌های منحصر به فرد: بهترین روش اینه که از شناسه‌های یکتا که از پایگاه داده یا منبع داده شما میاد استفاده کنید. این کلیدها معمولاً پایدار و تغییر ناپذیر هستن.
2. استفاده از ایندکس‌ها به عنوان آخرین راه‌حل: اگر نتونید شناسه‌های یکتا پیدا کنید، می‌تونید از ایندکس‌های آرایه به عنوان کلید استفاده کنید. ولی این کار توصیه نمی‌شه مگر در شرایط خاص، چون تغییرات در ترتیب یا تعداد عناصر می‌تونه باعث مشکلاتی بشه.

مثال

فرض کنید که دارید لیستی از وظایف رو نمایش می‌دید و هر وظیفه یک شناسه یکتا داره. می‌تونید به این شکل از کلیدها استفاده کنید:

const tasks = [
  { id: 1, name: 'Task 1' },
  { id: 2, name: 'Task 2' },
  { id: 3, name: 'Task 3' }
];
  function TaskList() {
   return (
    <ul>
     {tasks.map(task => (
     <li key={task.id}>{task.name}</li>
      ))}
    </ul>
);
}

در این مثال، task.id به عنوان کلید استفاده شده که به React کمک می‌کنه تا به درستی وظایف رو مدیریت کنه.