از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
درک کلیدهای منحصر به فرد برای کودکان آرایه در React.jsReact.js از تعدادی مفاهیم منحصر به فرد استفاده می کند که در ابتدا می تواند کمی گیج کننده به نظر برسد. یکی از این مفاهیم استفاده از کلیدها است، به ویژه هنگام کار با آرایه های مؤلفه. چرا و چگونه از این کلیدها استفاده می کنیم؟ هدف این مقاله توضیح استفاده از کلیدهای منحصر به فرد برای کودکان آرایه است…
سرفصلهای مطلب
معرفی
React.js از تعدادی مفاهیم منحصر به فرد استفاده می کند که در ابتدا ممکن است کمی گیج کننده به نظر برسند. یکی از این مفاهیم استفاده از کلیدها است، به ویژه هنگام کار با آرایه های مؤلفه. چرا و چگونه از این کلیدها استفاده می کنیم؟ هدف این مقاله توضیح استفاده از کلیدهای منحصر به فرد برای کودکان آرایه در React است.
کلیدها در React
در React، یک کلید یک ویژگی رشته‌ای است که باید هنگام ایجاد لیست‌هایی از عناصر در آن قرار دهید. بیایید به یک مثال ساده نگاهی بیندازیم:
const numbers = (1, 2, 3, 4, 5);
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
در این مثال، ما لیستی از اعداد ایجاد می کنیم. هر یک <li> عنصر به یک ویژگی کلیدی منحصر به فرد نیاز دارد. در اینجا، ما از مقدار رشته ای عدد به عنوان کلید استفاده می کنیم.
این کلیدها با دادن هویت پایدار به عناصر به عنوان یک اشاره به الگوریتم آشتی React عمل می کنند. آنها قصد ندارند در سطح جهانی منحصر به فرد باشند. آنها فقط باید بین اجزا و خواهر و برادرشان منحصر به فرد باشند.
اما چرا در وهله اول به کلید نیاز داریم؟ خب، کلیدها به React کمک می‌کنند تا مشخص کند کدام موارد تغییر کرده، اضافه شده یا حذف شده‌اند. کلیدهایی باید به عناصر داخل یک آرایه داده شود تا به عناصر هویت پایدار و در نتیجه دسترسی آسان تر بدهد.
شایان ذکر است که بهترین راه برای انتخاب یک کلید، استفاده از رشته ای است که به طور منحصر به فرد یک آیتم لیست را در میان خواهر و برادر خود شناسایی می کند. یک راه معمول برای انجام این کار استفاده از شناسه های داده های خود به عنوان کلید است:
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
در اینجا، ما آن را فرض می کنیم todos آرایه ای از اشیاء با an است id و الف text صفت. این id از هر todo شی منحصر به فرد است، بنابراین نامزد خوبی برای یک کلید است.
اما اگر یک شناسه یا رشته منحصر به فرد برای استفاده به عنوان کلید نداشته باشید چه اتفاقی می افتد؟ در این صورت، ممکن است وسوسه شوید که از فهرست آیتم به عنوان یک کلید استفاده کنید:
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
با این حال، این به طور کلی توصیه نمی شود. Index به عنوان یک کلید یک ضد الگو در React است زیرا می تواند بر عملکرد تأثیر منفی بگذارد و ممکن است باعث ایجاد مشکل در وضعیت مؤلفه شود. در صورت امکان بهتر است از شناسه های رشته منحصر به فرد استفاده کنید.
اما چرا به این کلیدها نیاز داریم؟
در React.js، هر زمان که لیست یا آرایه ای از عناصر ایجاد می کنیم، هر عنصر به یک عنصر منحصر به فرد نیاز دارد key صفت. این ممکن است در ابتدا یک مرحله غیر ضروری به نظر برسد، اما در واقع برای الگوریتم متفاوت React که به بهینه سازی رندر کمک می کند، بسیار مهم است. process.
هنگامی که وضعیت یک جزء تغییر می کند، React باید تعیین کند که آیا DOM موجود را به روز کند یا یک DOM جدید ایجاد کند. اینجاست که الگوریتم تفاوت وارد عمل می شود. DOM مجازی جدید را با DOM قدیمی مقایسه می کند و فقط قسمت هایی را که تغییر کرده اند به روز می کند.
الگوریتم diffing عملکرد را با به حداقل رساندن مقدار دستکاری DOM افزایش می دهد.
با اختصاص یک کلید منحصر به فرد به هر عنصر در یک لیست، به React راهی برای شناسایی هر عنصر در آرایه می دهید. این به React اجازه می‌دهد تا مؤلفه‌ها را به‌طور مؤثر رندر کند یا DOM را به‌روزرسانی کند. بدون کلیدهای منحصربه‌فرد، React مجبور است همه عناصر موجود در لیست را دوباره رندر کند، که می‌تواند عملکرد را کاهش دهد، مخصوصاً زمانی که با لیست‌های بزرگ سروکار دارید.
روش استفاده از کلیدهای منحصر به فرد با کودکان آرایه
اکنون که متوجه شدیم چرا کلیدهای منحصر به فرد مهم هستند، بیایید ببینیم چگونه می‌توانیم از آنها در کودکان آرایه استفاده کنیم. رایج ترین سناریویی که در آن باید از کلیدهای منحصر به فرد استفاده کنید، زمانی است که فهرستی از عناصر را ارائه می دهید روی آرایه ای از داده ها
بیایید نگاهی به مثال قبلی خود بیاندازیم، اما عمیق تر. در اینجا ما آرایه‌ای از موارد کار داریم و می‌خواهیم آنها را در فهرستی ارائه کنیم:
const todos = ('Buy groceries', 'Walk the dog', 'Write article');
return (
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
);
در این مثال، ما از شاخص آرایه به عنوان یک کلید استفاده می کنیم. این یک روش معمول است، اما اگر ترتیب موارد در لیست شما تغییر کند، توصیه نمی شود. این به این دلیل است که کلید باید بین رندرهای مجدد پایدار باشد و در صورت تغییر ترتیب آیتم ها، استفاده از ایندکس به عنوان کلید می تواند مشکلاتی را ایجاد کند.
در اینجا روش انجام این کار آمده است:
const todos = (
{ id: '1', text: 'Buy groceries' },
{ id: '2', text: 'Walk the dog' },
{ id: '3', text: 'Write article' },
);
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
در این مثال، هر یک todo آیتم یک شی با یک منحصر به فرد است id و text. ما از id به عنوان یک کلید، که تضمین می کند هر عنصر در لیست دارای یک کلید منحصر به فرد است که بین رندرهای مجدد ثابت می ماند.
چگونه خطاهای مرتبط کلیدی را رفع و از آن جلوگیری کنیم
یکی از رایج‌ترین خطاهایی که توسعه‌دهندگان هنگام کار با کلیدها در React با آن مواجه می‌شوند، اخطار «هشدار: هر کودک در فهرست باید دارای یک «کلید» منحصربه‌فرد باشد. این هشدار زمانی ظاهر می‌شود که فراموش کنید کلیدهای منحصربه‌فرد را به موارد فهرست خود اختصاص دهید.
ساده‌ترین مثالی که می‌توانیم نشان دهیم، جایی است که روی آرایه‌ای از اعداد نقشه‌برداری می‌کنیم و فهرستی از عناصر را برمی‌گردانیم:
const numbers = (1, 2, 3, 4, 5);
return (
<ul>
{numbers.map((number) =>
<li>{number}</li>
)}
</ul>
);
متوجه خواهید شد که ما a ارائه نکردیم key به آیتم های لیست ما کمک کنید. اجرای این کد به اخطار قبلی منجر می شود.
برای رفع این مشکل، ما فقط باید یک کلید منحصر به فرد را به هر آیتم لیست اختصاص دهیم. در این مورد، می توانیم از شاخص آرایه به عنوان کلید استفاده کنیم:
const numbers = (1, 2, 3, 4, 5);
return (
<ul>
{numbers.map((number, index) =>
<li key={index}>{number}</li>
)}
</ul>
);
سایر خطاهای مرتبط با کلید
یکی دیگر از مشکلات رایج مرتبط با کلید در React استفاده از کلیدهایی است که منحصر به فرد نیستند. همانطور که React متکی است، این می تواند منجر به رفتار غیرمنتظره شود روی کلیدهایی برای شناسایی صحیح عناصر
به عنوان مثال، مثال زیر را در نظر بگیرید:
const numbers = (1, 2, 3, 4, 5, 5);
return (
<ul>
{numbers.map((number) =>
<li key={number}>{number}</li>
)}
</ul>
);
در این مورد دوتا داریم 5s در آرایه ما، به این معنی که دو آیتم لیست کلید یکسانی خواهند داشت. این منجر به یک هشدار جدید می شود: “با یک کلید با دو کودک روبرو شدم”.
برای رفع این خطا، باید مطمئن شوید که کلیدهای شما منحصر به فرد هستند. می توانید این کار را با اضافه کردن شاخص به عدد انجام دهید:
const numbers = (1, 2, 3, 4, 5, 5);
return (
<ul>
{numbers.map((number, index) =>
<li key={number + '-' + index}>{number}</li>
)}
</ul>
);
در این کد، حتی اگر اعداد یکسان باشند، کلیدها منحصر به فرد خواهند بود زیرا ایندکس بخشی از کلید است.
اگرچه همانطور که قبلاً چند بار ذکر شد، استفاده از شاخص آرایه به عنوان کلید توصیه نمی شود.
نتیجه
در این مقاله نگاهی به مفهوم کلیدهای منحصر به فرد برای کودکان آرایه در React.js انداخته ایم. مانند اینکه چه کلیدهایی در React هستند، چرا به کلیدهای منحصر به فرد نیاز داریم، روش استفاده از آنها با فرزندان آرایه، و روش رفع و جلوگیری از خطاهای مرتبط با کلید.
بنابراین، دفعه بعد که روی یک آرایه در React نقشه می‌زنید، به یاد داشته باشید که به هر کودک یک کلید منحصر به فرد بدهید. این یک قدم کوچک است که می تواند شما را از بسیاری از سردردهای احتمالی نجات دهد.
منتشر شده در 1402-12-29 03:05:06
