استیت (State) و پراپس (Props) در ری‌اکت

در React، state و props دو مفهوم اصلی هستند که در مدیریت داده‌ها و ارتباطات بین کامپوننت‌ها استفاده می‌شوند. هرکدام نقش خاصی دارند و تفاوت‌های مهمی با هم دارند.

۱. State در React چیست؟

State به داده‌هایی اطلاق می‌شود که در یک کامپوننت نگهداری می‌شوند و به صورت دینامیک تغییر می‌کنند. این داده‌ها معمولاً نمایانگر وضعیت داخلی یک کامپوننت هستند که ممکن است به‌طور مداوم تغییر کنند و باعث بازنویسی مجدد (re-render) کامپوننت شوند.

ویژگی‌ها:

مربوط به یک کامپوننت خاص است.

داده‌های تغییرپذیر هستند و می‌توانند تغییر کنند.

هنگام تغییر state، کامپوننت دوباره رندر می‌شود.

useState برای مدیریت state در کامپوننت‌های فانکشنال استفاده می‌شود.

مثال:

import React, { useState } from 'react';

function Counter() {

  const [count, setCount] = useState(0);  // state برای شمارش

  const increment = () => {

    setCount(count + 1);  // تغییر state

  };

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={increment}>Increment</button>

    </div>

  );

}

export default Counter;

در این مثال، count یک state است که در کامپوننت Counter ذخیره می‌شود و می‌توانیم آن را تغییر دهیم.

۲. Props در React چیست؟

Props (مخفف "properties") به داده‌هایی گفته می‌شود که به یک کامپوننت فرزند از کامپوننت والد منتقل می‌شوند. این داده‌ها معمولاً غیرقابل تغییر هستند و کامپوننت فرزند نمی‌تواند آن‌ها را تغییر دهد. این باعث می‌شود که props برای انتقال داده‌ها از یک کامپوننت به کامپوننت دیگر استفاده شوند.

ویژگی‌ها:

مربوط به ارتباط بین کامپوننت‌ها است.

داده‌های غیرقابل تغییر هستند.

کامپوننت فرزند نمی‌تواند props را تغییر دهد.

مثال:

import React from 'react';

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

function App() {

  return <Welcome name="Alice" />;

}

export default App;

در این مثال، name="Alice" به عنوان prop به کامپوننت Welcome ارسال می‌شود و کامپوننت Welcome آن را نمایش می‌دهد.

۳. تفاوت‌های اصلی بین State و Props

۴. چه زمانی از useState استفاده کنیم؟

از useState باید زمانی استفاده کنید که می‌خواهید وضعیت داخلی یک کامپوننت را ذخیره کنید و این وضعیت ممکن است در طول زمان تغییر کند. این تغییرات معمولاً منجر به رندر مجدد کامپوننت می‌شوند.

مثال‌ها:

وقتی یک فرم پر می‌شود و باید داده‌ها ذخیره شوند.

وقتی یک شمارنده (counter) ایجاد می‌کنید که به طور مداوم تغییر می‌کند.

زمانی که نیاز به ذخیره وضعیت‌هایی مانند باز بودن/نبودن منو، انتخاب آیتم‌ها و غیره دارید.

۵. چه زمانی از Props استفاده کنیم؟

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

مثال‌ها:

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

زمانی که رفتارهای مشترک (مثلاً توابع کلیک) را به کامپوننت‌های فرزند ارسال می‌کنید.

نتیجه‌گیری:

State برای نگهداری و مدیریت داده‌های داخلی و تغییرپذیر در یک کامپوننت استفاده می‌شود.

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

از useState زمانی استفاده کنید که می‌خواهید وضعیت داخلی کامپوننت خود را مدیریت کنید، و از props برای ارسال داده‌ها از یک کامپوننت والد به فرزند استفاده کنید.