React Keys Demystified: وقتی از Index به عنوان کلید استفاده می‌کنید، بد نیست

به عنوان توسعه دهندگان React، همه ما این شعار را شنیده ایم: “از شاخص آرایه به عنوان یک کلید استفاده نکنید!” آنقدر تکرار می شود که برای بسیاری به یک قانون بی چون و چرا تبدیل شده است. اما مانند بسیاری از قوانین در برنامه نویسی، واقعیت ظریف تر است. امروز، ما می‌خواهیم موقعیت‌هایی را بررسی کنیم که در آن استفاده از شاخص به‌عنوان یک کلید ممکن است گناه اصلی آن نباشد.

درک کلیدها، آشتی، و چرخه رندر-تعهد

قبل از اینکه وارد بحث شویم، بیایید درک خود را از اینکه کلیدها در React چه می‌کنند و چگونه در تصویر بزرگ‌تر قرار می‌گیرند، تازه کنیم.

فرآیند آشتی

فرآیند آشتی React در قلب کارایی آن است. هنگامی که وضعیت یا props یک جزء تغییر می کند، React یک DOM مجازی جدید ایجاد می کند و آن را با قبلی مقایسه می کند. این مقایسه یا «تفاوت» به React اجازه می‌دهد تا دستکاری‌های واقعی DOM را که از نظر عملکرد پرهزینه هستند، به حداقل برساند.

چرخه Render-Commit

1. فاز رندر: React اجزای شما را فرا می خواند تا بفهمد چه چیزی باید روی صفحه باشد. این یک DOM مجازی جدید بر اساس وضعیت فعلی و ویژگی‌ها ایجاد می‌کند.
2. Reconciliation: React DOM مجازی جدید را با قبلی مقایسه می کند و آنچه را تغییر داده است شناسایی می کند.
3. Commit Phase: React تغییرات شناسایی شده را در DOM واقعی اعمال می کند.

نقش کلیدها

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

کلیدها دقیقا چه چیزی را حل می کنند؟

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

بدون کلیدها (یا با کلیدهای نامناسب)، React ممکن است به طور غیر ضروری عناصر DOM را که در واقع تغییر نکرده اند، دوباره ایجاد کند، که منجر به مشکلات عملکرد و باگ های احتمالی در وضعیت مؤلفه شود.

موردی برای استفاده از شاخص به عنوان یک کلید

حال، بیایید ببینیم که چرا استفاده از یک شاخص به عنوان یک کلید همیشه بد نیست. این سناریو را در نظر بگیرید:

const NumberList = ({ numbers }) => {
  return (
    

      {numbers.map((number, index) => (
        
{number}
      ))}
    
  );
};

در این مثال، استفاده از ایندکس به عنوان یک کلید کاملاً خوب است اگر:

1. لیست ثابت است (موارد اضافه، حذف یا مرتب نشده اند).
2. موارد موجود در لیست هیچ شناسه ای ندارند (در غیر این صورت می توانیم از شناسه به جای فهرست استفاده کنیم).
3. لیست هرگز دوباره مرتب نمی شود یا فیلتر نمی شود.

در این شرایط، ایندکس پایدار است و استفاده از آن به عنوان کلید هیچ مشکلی ایجاد نمی کند.

مشکل واقعی: کلیدهای ناپایدار

مسئله واقعاً در مورد استفاده از خود ایندکس نیست، بلکه در مورد استفاده از کلیدهای ناپایدار است. یک شاخص زمانی مشکل ساز می شود که به طور مداوم به یک مورد اشاره نکند. این زمانی اتفاق می افتد که:

• موارد از ابتدا یا وسط لیست به لیست اضافه یا حذف می شوند.
• لیست معکوس یا مرتب شده است.

در این موارد، شاخص هر آیتم تغییر می‌کند و React را به شناسایی اشتباه مؤلفه‌ها می‌کشاند و به طور بالقوه باعث ایجاد اشکال یا رندرهای غیرضروری می‌شود.

نتیجه گیری

در حالی که به طور کلی استفاده از شناسه های منحصر به فرد و پایدار به عنوان کلید یک روش خوب است، اجتناب جزمی از فهرست به عنوان یک کلید در همه شرایط غیر ضروری است. درک فرآیند تطبیق و هدف کلیدها به شما این امکان را می دهد که تصمیمات آگاهانه ای در مورد زمانی که استفاده از یک شاخص قابل قبول یا حتی ارجح است، بگیرید.

به یاد داشته باشید، قانون کلیدی (جناسی در نظر گرفته شده) ثبات است. تا زمانی که کلید شما به طور مداوم به یک مورد در رندرهای مجدد اشاره دارد، خواه یک شناسه، یک ویژگی منحصر به فرد یا بله، گاهی اوقات حتی یک نمایه باشد، شما در مسیر درستی هستید.

بنابراین دفعه بعد که به آن شاخص به عنوان یک کلید دسترسی پیدا کردید، احساس گناه نکنید – فقط مطمئن شوید که مفاهیم را درک کرده اید و این ابزار مناسب برای مورد استفاده خاص شما است.

PS می توانید اطلاعات بیشتری در مورد اسناد React پیدا کنید.

اگر می خواهید از آخرین اخبار جاوا اسکریپت و توسعه نرم افزار به روز بمانید، به کانال تلگرام من بپیوندید: TechSavvy: Frontend & Backend.