اول بیاید یه نگاهی به لیست ها در جاوا اسکریپت بندازیم.
با توجه به کد زیر، ما با استفاده از تابع ()map آرایه numbers رو پیمایش میکنیم و مقدار های ورودی رو دو برابر میکنیم؛ در نهایت ازشون log میگیریم:
این کد توی console مقدارهای [2, 4, 6, 8, 10] رو log میگیره.
در react، تبدیل آرایه ها به لیستی از elementها کاملا مشابه کد بالاست
حالا، آرایه ای از اعداد رو با استفاده از تابع ()map جاوا اسکریپت رو پیمایش میکنیم و برای هر کدوم از آیتم های آرایه یک المنت <li> رو return میکنیم و در نهایت مقدار به دست اومده رو درون ثابتی به نام listItems میریزیم
بعدش میتونیم کل آرایه listItems رو درون یک المنت <ul> استفاده کنیم
این کد یه لیست از رقم های بین 1 تا 5 رو (که گلوله های مشکی کنارش هست) نمایش میده
ما معمولاً فهرست ها رو درون یک کامپوننت render میکنیم
وقتی این کد را اجرا کنیم، به ما هشداری داده می شود که باید برای آیتم های لیست یه کلید ارائه بدیم. key یه صفت منحصر به فرده که ما باید هنگام ساخت لیستی از آرایه ها به هریک از element ها باید اختصاص بدیم. شاید براتون سوال بشه که دلیل این کار چیه که در ادامه توضیح میدم...
اول بیاید یه key به لیست خودمون اختصاص بدیم و مشکل کلید رو حل کنیم، کد بالا رو به این شکل ویرایش میکنیم
صفت key در شناسایی این که کدوم عنصر تغییر داشته، اضافه شده، یا حذو شده به react کمک میکنه. keyها باید به عناصر داخل آرایه داده شود تا عناصر هویت پایداری داشته باشند.
بهترین راه برای انتخاب یه key، استفاده از رشته ای است که به طور منحصر به فرد آیتم‌های لیست رو بین خواهر و برادرش شناسایی می کنه. اغلب ما از IDهای داده های دریافتی برای keyها استفاده میکنیم
وقتی هم که IDهای مشخصی برای render کردن item ها نداشتیم، به عنوان گزینه آخر میتونیم از indexهای itemهای آرایه به عنوان key استفاده کنیم
اگه قراره ترتیب آیتم ها تغییر کنه، استفاده از indexها را برای keyها توصیه نمیشه؛ این کار میتونه در کارایی تاثیر منفی بزاره و ممکنه مشکلاتی رو برای state کامپوننت ها ایجاد کنه.
ضمناً اگه ما صفت key رو به itemهای لیستمون ندیم react به صورت پیشفرض از indexها استفاده میکنه
نکته 1: keyها فقط در زمینه آرایه معنا دارن، و عناصر درون ()map نیاز به key دارند.
نکته 2: keyهای استفاده شده در هر آرایه باید در بین خواهر و برادرشان منحصر به فرد باشه و در دو آرایه متفاوت میتونیم از keyهای یک سان استفاده کنیم
نکته 3: صفت key فقط به react مربوط میشه و به کامپوننت ارسال نمیشه، اگه نیاز داشتیم که مقدار key رو به کامپوننت ارسال کنیم باید اونو با یه اسم متفاوت ارسال کنیم
