State در برابر Props در ری اکت React

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

state چیست؟

در ری اکت، state داده هایی هستند که توسط یک کامپوننت نگهداری می شوند. state می تواند برای ذخیره داده های پویای کامپوننت مانند مقدار یک شمارنده، وضعیت انتخاب یک گزینه یا وضعیت ورودی کاربر استفاده شود.

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

هنگامی که state تغییر می کند، ری اکت کامپوننت را مجدداً رندر می کند. این باعث می شود که DOM به روز شود و تغییرات در state در رابط کاربری ظاهر شوند.

در اینجا یک مثال ساده از نحوه استفاده از state آورده شده است:

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button ={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

در این مثال، state count مقدار اولیه 0 را دارد. دکمه Increment تابع setCount را فراخوانی میکند که مقدار count را به 1 افزایش میدهد. هنگامی که count تغییر میکند، ری اکت کامپوننت را مجدداً رندر میکند و مقدار جدید count در UI نمایش داده میشود.

در اینجا چند نکته برای استفاده از state در ری اکت آورده شده است:

• از state برای ذخیره داده های پویای کامپوننت استفاده کنید.
• از state برای ذخیره داده هایی استفاده کنید که باید در طول زمان تغییر کنند.
• از state برای ذخیره داده هایی استفاده کنید که باید در UI نمایش داده شوند.
• از state برای ذخیره داده هایی استفاده کنید که باید توسط سایر کامپوننت ها قابل دسترسی باشند.

پراپس props چیست؟

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

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

در اینجا یک مثال ساده از نحوه استفاده از پراپس آورده شده است:

const App = () => {
  const props = {
    title: "Hello, world!",
  };

  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

در این مثال، پراپ title مقدار "Hello, world!" را دارد. این مقدار از کامپوننت پدر به کامپوننت فرزند منتقل می شود و در رابط کاربری نمایش داده می شود.

در اینجا چند نکته برای استفاده از پراپس در React آورده شده است:

• از پراپس برای انتقال داده ها از یک کامپوننت پدر به یک کامپوننت فرزند استفاده کنید.
• از پراپس برای انتقال داده هایی استفاده کنید که نباید در طول زمان تغییر کنند.
• از پراپس برای انتقال داده هایی استفاده کنید که باید در UI نمایش داده شوند.

اکنون به سوالات زیر توجه کنید:

1. چگونه مفهوم "state" را توصیف می کنید؟

• State روشی است برای React تا مقادیر ذخیره شده درون یک کامپوننت را به خاطر بسپارد.
• این مشابه با اعلام متغیرها درون یک کامپوننت است، اما با چند مزیت اضافی (که بعداً به آنها خواهیم پرداخت).

2. چه زمانی باید از props به جای state استفاده کنید؟

• هر زمان که بخواهید داده هایی را به یک کامپوننت منتقل کنید تا آن کامپوننت بتواند تعیین کند که چه چیزی روی صفحه نمایش داده می شود.

3. چه زمانی باید از state به جای props استفاده کنید؟

• هر زمان که بخواهید یک کامپوننت برخی از مقادیر را درون خود حفظ کند (و حتی زمانی که React کامپوننت را مجدداً رندر می کند، آن مقادیر را "به خاطر بسپارد").

4. "immutable" به چه معناست؟ آیا props immutable هستند؟ آیا state immutable است؟

• Immutable به معنای "تغییرناپذیر" است.
• Props immutable هستند، یعنی پس از ایجاد تغییر نمی‌کنند.
• State mutable است، یعنی می‌توان مقدار آن را پس از ایجاد، تغییر داد.

توضیح بیشتر:

• Props برای انتقال داده ها از یک کامپوننت والد به یک کامپوننت فرزند استفاده می شوند. آنها مانند یک "مسیر یک طرفه" از والد به فرزند هستند و نمی توان آنها را توسط فرزند تغییر داد. این امر باعث می شود تا جریان داده ها در برنامه شما قابل پیش بینی باشد.
• State برای مدیریت داده های پویای درون یک کامپوننت استفاده می شود. می توان آن را توسط کامپوننت تغییر داد و این تغییرات باعث می شود React کامپوننت را مجدداً رندر کند. این امر برای ایجاد UI های تعاملی و پویا ضروری است.

نکات کلیدی:

• از props برای انتقال داده های ثابتی که نباید تغییر کنند استفاده کنید.
• از state برای مدیریت داده های پویایی که باید در طول زمان تغییر کنند استفاده کنید.
• state قابل تغییر است، در حالی که props قابل تغییر نیستند.