پراپس‌ها در React – انتقال داده بین کامپوننت‌ها به‌صورت مقیاس‌پذیر

مقدمه

در React، پراپس‌ها (props) برای انتقال داده از یک کامپوننت به کامپوننت دیگر استفاده می‌شوند. این روش جایگزین استفاده از متغیرهای سراسری است و امکان ساخت اپلیکیشن‌های مقیاس‌پذیر و قابل نگهداری را فراهم می‌کند.

انتقال داده به کامپوننت App

به‌جای استفاده از متغیر سراسری، داده‌ها را داخل کامپوننت App تعریف می‌کنیم:

const App = () => {
  const stories = [
    {
      title: 'React',
      url: 'https://react.dev/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://redux.js.org/',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

  return (
    

      
    
  );
};

ارسال پراپس به کامپوننت فرزند

آرایهٔ stories را به کامپوننت List ارسال می‌کنیم:

<List list={stories} />

در کامپوننت List، داده‌ها از طریق پارامتر props دریافت می‌شوند:

const List = (props) => (
  

    {props.list.map((item) => (
      
{item.title}
    ))}
  
);

استخراج کامپوننت Item

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

const List = (props) => (
  

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

const Item = (props) => (
  

    
      {props.item.title}
    
    {props.item.author}
    {props.item.num_comments}
    {props.item.points}
  
);

اهمیت ویژگی key

در رندر لیست‌ها، ویژگی key برای هر آیتم ضروری است تا React بتواند به‌صورت بهینه عناصر را مدیریت و به‌روزرسانی کند.

پراپس‌ها تغییرناپذیر هستند

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

جمع‌بندی

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