📚 بخش ۱۷: تفاوت Props و State در React

محمد
اموزش React

۱. مقدمه

در React، تمام منطق و نمایش رابط کاربری بر اساس «داده» ساخته می‌شود.
این داده‌ها می‌توانند از دو منبع بیایند:

Props — داده‌هایی که از والد به فرزند منتقل می‌شوند.
State — داده‌هایی که داخل خود کامپوننت نگهداری و مدیریت می‌شوند.

اگر فرق این دو را ندانیم، ممکن است:

داده‌ها را در جای اشتباه ذخیره کنیم.
به‌طور بی‌دلیل دچار رندرهای اضافی شویم.
ارتباط بین کامپوننت‌ها به‌هم بریزد.

۲. تعریف ساده

Props:

داده ورودی کامپوننت، از والد ارسال می‌شود.
تغییرپذیری ندارد (Immutable).
یک‌طرفه است (یک‌طرفه از والد به فرزند جریان دارد).
معادل «پارامتر» برای یک تابع.

State:

داده داخلی کامپوننت.
قابل تغییر در طول عمر کامپوننت.
باعث رندر مجدد کامپوننت هنگام تغییر می‌شود.
معادل «متغیر» داخلی یک کلاس یا تابع.

۳. قیاس برای درک بهتر

فرض کن یک رستوران داری:

Props: مثل سفارش مشتری است که از بیرون می‌آید (مثلاً “یک پیتزا با پنیر اضافه”).
State: مثل وضعیت داخلی آشپزخانه است (مواد موجود، دمای فر، لیست سفارش‌های در حال آماده‌سازی).

سفارش مشتری (Props) را آشپزخانه (کامپوننت) دریافت می‌کند ولی خودش نمی‌تواند سفارش را تغییر دهد.
اما موجودی آشپزخانه (State) می‌تواند تغییر کند تا غذا آماده شود.

۴. ویژگی‌های Props و State — مقایسه جدولی

ویژگی	Props	State
منبع داده	والد کامپوننت	داخل کامپوننت
تغییرپذیری	خیر (Immutable)	بله (Mutable با setState یا useState)
جریان داده	یک‌طرفه (والد ➡ فرزند)	داخلی کامپوننت
هدف	دریافت و نمایش داده یا منطق از بیرون	مدیریت وضعیت داخلی کامپوننت
ایجاد/مدیریت	توسط والد	توسط خود کامپوننت
تأثیر بر رندر	تغییر در مقدار باعث رندر مجدد فرزند می‌شود	تغییر در مقدار باعث رندر مجدد همان کامپوننت می‌شود
استفاده در Hooks	نیازی به hook ندارد	با useState یا سایر hooks مدیریت می‌شود

۵. مثال عملی — Props

function Greeting({ name }) {
  return <h1>سلام {name}</h1>;
}

function App() {
  return (
    <>
      <Greeting name="علی" />
      <Greeting name="سارا" />
    </>
  );
}

📌 هر بار name متفاوت است ولی خود Greeting هیچ داده داخلی ندارد.

۶. مثال عملی — State

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>شمارش: {count}</h2>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

export default Counter;

📌 اینجا count یک state داخلی است که با کلیک کاربر تغییر می‌کند و کامپوننت مجدد رندر می‌شود.

۷. مثال ترکیبی — Props + State

گاهی کامپوننت هم props دارد، هم state:

function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes}
    </button>
  );
}

function App() {
  return <LikeButton initialLikes={5} />;
}

📌 initialLikes از والد ارسال شده (props) ولی بعد از مقداردهی اولیه، تغییر این prop روی state اثر ندارد چون state مستقل مدیریت می‌شود.

۸. نکات فنی مهم

Props فقط خواندنی هستند. برای تغییر آن‌ها باید والد مقدار جدید ارسال کند.
State می‌تواند با setState یا setMyState در هوک‌ها تغییر کند.
تغییر props باعث رندر مجدد کامپوننت فرزند می‌شود فقط اگر props در JSX یا منطق آن استفاده شود.
State فقط داخل همان کامپوننت وجود دارد مگر اینکه با Context یا سایر روش‌ها اشتراک‌گذاری شود.

۹. اشتباهات رایج مبتدیان

❌ تلاش برای تغییر props داخل فرزند:

props.name = "جدید"; // اشتباه بزرگ

✅ باید والد مقدار props را تغییر دهد.

❌ قرار دادن همه‌چیز در state:
بعضی مبتدی‌ها حتی داده ثابت را هم در state می‌گذارند. این باعث رندرهای اضافی بدون دلیل می‌شود.

❌ اشتباه گرفتن props با state:
Props → از بیرون می‌آید
State → داخل کامپوننت ساخته و مدیریت می‌شود

۱۰. تمرین‌های عملی

تمرین ۱ — ساعت دیجیتال

یک Clock بساز که زمان را در state نگه دارد و هر ثانیه آپدیت کند.
آزمایش کن که اگر قالب نمایش زمان (format) به صورت prop از والد بگیرد چه تغییراتی باید بدهی.

تمرین ۲ — نمایش لیست با props

یک UserList بساز که آرایه کاربران را از props بگیرد و نمایش دهد.

تمرین ۳ — ترکیب props و state

یک TodoItem بساز که متن todo از props بیاید و وضعیت «انجام شده» به‌عنوان state داخلی تغییر کند.

۱۱. نکات حرفه‌ای

قانون کلی: اگر داده باید توسط والد کنترل شود، prop است؛ اگر داده فقط به کاربر آن کامپوننت مربوط باشد، state است.
State را فقط زمانی استفاده کن که داده با تعامل کاربر یا منطق داخلی تغییر می‌کند.
تغییر state یا props همیشه باعث رندر مجدد می‌شود، پس داده‌های سنگین را غیرضروری در این دو قرار نده.

۱۲. جمع‌بندی

Props: داده‌های ورودی، تغییرناپذیر، یک‌طرفه از والد به فرزند.
State: داده‌های داخلی، قابل تغییر، مدیریت‌شده توسط خود کامپوننت.
استفاده درست از هرکدام باعث تمیزی و کارایی کد می‌شود.
ترکیب صحیح props و state کلید ساخت کامپوننت‌های پویا و منعطف است.

محمد وب‌سایت