تسلط بر لیستها و کلیدها در React
رندر کردن لیستها در React ساده است، اما انجام درست آن دشوار است.
بسیاری از توسعهدهندگان از ایندکس آرایه به عنوان کلید استفاده میکنند. این یک اشتباه است و منجر به باگها و کاهش عملکرد میشود.
در اینجا نحوه مدیریت دادههای پویا در React آورده شده است.
نحوه استفاده React از لیستها
React از متد map() برای تبدیل آرایهها به عناصر رابط کاربری (UI) استفاده میکند. وقتی از map() استفاده میکنید، React هر بخش از دادهها را به یک کامپوننت تبدیل میکند.
نقش کلیدها (Keys) React از یک Virtual DOM استفاده میکند. وقتی دادهها تغییر میکنند، React دادههای جدید را با دادههای قدیمی مقایسه میکند. این فرآیند reconciliation نامیده میشود.
کلیدها به عنوان شناسههای منحصربهفرد عمل میکنند. آنها دقیقاً به React میگویند که کدام آیتم تغییر کرده، جابهجا شده یا حذف شده است.
چرا استفاده از ایندکس به عنوان کلید خطرناک است استفاده از ایندکس (0, 1, 2...) به عنوان کلید باعث سه مشکل اصلی میشود:
- خطاهای وضعیت کامپوننت (Component State Errors): اگر لیستی را مرتب کنید، فیلدهای ورودی یا چکباکسها ممکن است دادههای مربوط به آیتم اشتباه را نشان دهند.
- افت عملکرد: React نمیتواند تشخیص دهد هر آیتم کدام است. این امر باعث میشود که React اغلب به جای فقط یک آیتم، کل لیست را دوباره رندر کند.
- باگهای بصری: رابط کاربری شما ممکن است درست به نظر برسد، اما وقتی آیتمها جابهجا میشوند، منطق داخلی برنامه دچار مشکل میشود.
روش صحیح استفاده از کلیدها برای اینکه اپلیکیشن خود را سریع و پایدار نگه دارید، این قوانین را دنبال کنید:
- استفاده از شناسههای منحصربهفرد: همیشه از IDهای دیتابیس خود (مانند UUID یا کلید اصلی) استفاده کنید.
- هرگز از
Math.random()استفاده نکنید: تولید کلید در حین رندر باعث میشود React در هر بهروزرسانی، تکتک عناصر را دوباره ایجاد کند. این کار عملکرد را از بین میبرد. - کلیدها را پایدار نگه دارید: یک کلید باید در تمام طول چرخه حیات (lifecycle) برای یک داده مشخص، ثابت بماند.
مقایسه در یک نگاه
ویژگی: پایداری استفاده از ایندکس: ناپایدار استفاده از ID منحصربهفرد: بسیار پایدار
ویژگی: عملکرد استفاده از ایندکس: ضعیف استفاده از ID منحصربهفرد: بهینه
ویژگی: امنیت وضعیت (State Safety) استفاده از ایندکس: ناامن استفاده از ID منحصربهفرد: ۱۰۰٪ ایمن
خلاصه برای توسعهدهندگان
از متد map() استفاده کنید. یک ID منحصربهفرد و پایدار را به پراپ key پاس دهید. از استفاده از ایندکس آرایه برای هر لیستی که امکان تغییر، مرتبسازی یا فیلتر شدن دارد، خودداری کنید.