کامپوننت‌های کنترل‌شده و مدیریت پیشرفته پراپس‌ها در React

مقدمه

عناصر HTML مانند <input> دارای وضعیت داخلی هستند که به‌طور پیش‌فرض با React همگام نیست. برای کنترل کامل رفتار این عناصر، باید آن‌ها را به کامپوننت‌های کنترل‌شده تبدیل کنیم که وضعیت‌شان توسط React مدیریت می‌شود.

تعریف کامپوننت کنترل‌شده

برای کنترل فیلد ورودی، باید مقدار آن را از وضعیت React بگیریم و با onChange آن را به‌روزرسانی کنیم:

const App = () => {
  const [searchTerm, setSearchTerm] = React.useState('React');

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    

      
    
  );
};

const Search = ({ search, onSearch }) => (
  

    Search: 
    
  
);

در این حالت، فیلد ورودی به‌طور کامل توسط وضعیت React کنترل می‌شود و هر تغییر باعث باز-render شدن کامپوننت می‌گردد.

مزایای کامپوننت‌های کنترل‌شده

• رفتار قابل پیش‌بینی و قابل تست
• امکان اعتبارسنجی ورودی‌ها
• هماهنگی کامل بین UI و داده‌ها

Destructuring پراپس‌ها

پراپس‌ها در React به‌صورت آبجکت ارسال می‌شوند. برای دسترسی راحت‌تر به پراپرتی‌ها، می‌توان از object destructuring استفاده کرد:

const Search = ({ search, onSearch }) => (
  
);

این روش باعث خوانایی بیشتر و کاهش کدهای تکراری می‌شود.

Destructuring تو در تو

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

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

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

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

جمع‌بندی

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