دیس ترکچرینگ پراپس ها (Props Destructuring)

در React، دیس ترکچرینگ پراپس ها یعنی از شیء پراپس فقط چند کلید بگیری. مثل وقتی از کیف بزرگ فقط خودکار و مداد را بیرون می آوری و بقیه را کاری نداری.

دیس ترکچرینگ (Destructuring) پراپس ها در React چیست؟

دیس ترکچرینگ (Destructuring) یعنی شکستن یک شیء یا آرایه به متغیرهای جدا. در React، پراپس ها یک شیء هستند. بنابراین با دیس ترکچرینگ پراپس ها، فقط همان فیلدهای لازم را جدا می کنی و بقیه را نادیده می گیری.

این کار کد را کوتاه، خوانا و تمیز می کند. همچنین اشتباه تایپی روی props.something کمتر می شود، چون مستقیم با نام همان فیلد کار می کنی.

دیس ترکچرینگ پراپس ها در ورودی کامپوننت

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

function Car({ color }) {
  return (
    <h2>My car is {color}!</h2>
  );
}

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" model="Mustang" color="red" year={1969} />
);

مشاهده در ادیتور

اینجا کامپوننت Car کلی پراپس دریافت می کند؛ برند، مدل، رنگ و سال. اما در ورودی تابع، فقط color را با دیس ترکچرینگ می گیرد و بقیه را نادیده می گیرد.

نکته: علامت آکولاد { } کنار نام پارامتر، نشانه دیس ترکچرینگ است؛ مثل function Car({ color }).

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

روش دوم این است که تابع همان props را بگیرد. بعد، داخل بدنه، از روی شیء پراپس دیس ترکچرینگ انجام دهی. این روش زمانی خوب است که اول کل شیء را لازم داری.

function Car(props) {
  const { brand, model } = props;
  return (
    <h2>I love my {brand} {model}!</h2>
  );
}

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" model="Mustang" color="red" year={1969} />
);

مشاهده در ادیتور

در این مثال، props همه چیز را می گیرد. بعد با const { brand, model } = props; فقط همین دو کلید جدا می شوند و در JSX استفاده می شوند.

این روش وقتی خوب است که گاهی لازم است کل props را برای ارسال به جایی دیگر نگه داری، اما فقط چند فیلد را مستقیم استفاده می کنی.

استفاده از ...rest در دیس ترکچرینگ پراپس ها

گاهی نمی دانی چند پراپس دقیقاً می رسد. در این حالت، از عملگر ...rest استفاده می کنی. این عملگر بقیه پراپس ها را در یک شیء جدید جمع می کند.

function Car({ color, brand, ...rest }) {
  return (
    <h2>My {brand} {rest.model} is {color}!</h2>
  );
}

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" model="Mustang" color="red" year={1969} />
);

مشاهده در ادیتور

اینجا color و brand جدا گرفته می شوند. بقیه پراپس ها مثل model و year داخل شیء rest قرار می گیرند؛ مثل { model: "Mustang", year: 1969 }.

نکته: ...rest فقط یک نام قراردادی است. می توانی اسم دیگری بگذاری، اما سه نقطه ... باید باشد.

مقدار پیش فرض برای پراپس ها با دیس ترکچرینگ

با دیس ترکچرینگ پراپس ها، می توانی مقدار پیش فرض (Default Value) هم بدهی. یعنی اگر پراپس خالی بود، یک مقدار استاندارد استفاده شود؛ مثل رنگ آبی برای ماشین.

function Car({ color = "blue", brand }) {
  return (
    <h2>My {color} {brand}!</h2>
  );
}

createRoot(document.getElementById("root")).render(
  <Car brand="Ford" />
);

مشاهده در ادیتور

در این مثال، چون پراپس color ارسال نشده است، مقدار پیش فرض "blue" استفاده می شود. بنابراین متن نهایی می شود «My blue Ford!».

نکته: مقدار پیش فرض فقط وقتی استفاده می شود که پراپس تعریف نشده باشد؛ اگر مقدار دیگری بفرستی، همان مقدار جدید نمایش داده می شود.

جمع بندی سریع دیس ترکچرینگ پراپس ها

• دیس ترکچرینگ پراپس ها یعنی جدا کردن چند کلید از شیء پراپس.
• می توانی در ورودی کامپوننت یا داخل بدنه دیس ترکچرینگ انجام دهی.
• با ...rest بقیه پراپس ها را در یک شیء جمع می کنی.
• با دیس ترکچرینگ می توانی برای پراپس مقدار پیش فرض تنظیم کنی.
• این تکنیک کد React را تمیز، کوتاه و راحت تر برای خواندن می کند.