Spread and Rest Operators in React – Writing Concise and Readable Component Code

مقدمه

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

مرحله اول: ارسال پراپس‌ها به‌صورت دستی

در ابتدا، هر پراپرتی از آیتم به‌صورت جداگانه به کامپوننت Item ارسال می‌شود:

{list.map((item) => (
  
))}

این روش کار می‌کند، اما باعث شلوغی در کامپوننت والد می‌شود.

مرحله دوم: استفاده از عملگر اسپرد

می‌توانیم با استفاده از {...item} کد را ساده‌تر کنیم:

{list.map((item) => (
  
))}

این روش تمام پراپرتی‌های آیتم را به‌صورت پراپس به کامپوننت Item ارسال می‌کند.

مرحله سوم: استفاده از عملگر رست

برای حذف objectID از پراپس‌ها (که فقط برای کلید استفاده می‌شود)، از عملگر رست استفاده می‌کنیم:

{list.map(({ objectID, ...item }) => (
  
))}

اکنون objectID جدا شده و باقی‌ماندهٔ آیتم به‌صورت پراپس ارسال می‌شود.

destructuring پراپس‌ها در کامپوننت‌ها

در کامپوننت Item می‌توانیم پراپس‌ها را مستقیماً در امضای تابع destructure کنیم:

const Item = ({ title, url, author, num_comments, points }) => (
  

    {title}
    {author}
    {num_comments}
    {points}
  
);

destructuring تو در تو (اختیاری)

برای آبجکت‌های تو در تو، می‌توان از destructuring تو در تو استفاده کرد:

const Item = ({
  item: {
    title,
    url,
    author,
    num_comments,
    points,
  },
}) => (...)

از این روش فقط زمانی استفاده کنید که خوانایی را افزایش دهد.

جمع‌بندی

عملگرهای اسپرد و رست باعث تمیزتر شدن کدهای React می‌شوند. از اسپرد برای ارسال همهٔ پراپرتی‌ها، و از رست برای حذف پراپرتی‌های خاص استفاده کنید. ترکیب این روش‌ها با destructuring باعث نوشتن کدی خوانا، قابل نگهداری و حرفه‌ای می‌شود — مخصوصاً در پروژه‌های تیمی که وضوح کد اهمیت زیادی دارد.