تفاوت Props و State در React — چه فرقی دارن و کی باید از هرکدوم استفاده کنیم؟

سلام! 👋
امیدوارم حالت خوب باشه و از مسیر یادگیری React لذت ببری. امروز میخوایم بریم سراغ یکی از مهمترین مفاهیمی که باید به عنوان یک توسعه دهنده React یاد بگیری: تفاوت بین props و state.

اگه تا حالا با خودت فکر کردی "مگه اینا یکی نیستن؟ چرا دوتا چیز جدا داریم؟"، تنها نیستی! این دوتا در نگاه اول شبیه هم به نظر میرسن، ولی در واقع کارکردهای کاملاً متفاوتی دارن — و درک درست تفاوتشون میتونه مهارتت رو در React حسابی ارتقاء بده.

پس یک نوشیدنی خوشمزه برای خودت آماده کن ☕ و بیا با هم بررسی کنیم که props و state چطور کار میکنن، چه فرقی با هم دارن، و کی باید از هر کدوم استفاده کنیم. چه تازه کار باشی و چه بخوای پایه هات رو قوی تر کنی، این راهنما میتونه کمکت کنه.

بزن بریم!

درک تفاوت بین Props و State در React

اگه تازه با React آشنا شدی، احتمالاً با اصطلاحات props و state برخورد کردی. در نگاه اول ممکنه این دوتا شبیه هم به نظر برسن، اما در واقع عملکردها و رفتارهای متفاوتی دارن که برای ساختن اپلیکیشن های پویا و قابل نگهداری، دونستن تفاوتشون ضروریه.

تو این مقاله، تفاوت بین props و state رو بررسی میکنیم، کی باید از هرکدوم استفاده کنیم، و چرا درک این دو مفهوم برای نوشتن کامپوننتهای تمیز در React حیاتی هست.

منظور از Props چیه؟

خب Props (مخفف “properties”) راهیه که کامپوننت های والد، داده رو به کامپوننت های فرزند منتقل میکنن. میتونی اونا رو شبیه پارامترهای تابع در نظر بگیری.

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

ویژگیهای اصلی props:

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

مثال:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Parent component
<Greeting name=&quotSoheil&quot />

منظور از State چیه؟

اما State راهیه برای اینکه یک کامپوننت بتونه اطلاعات خودش رو ذخیره و مدیریت کنه. برخلاف props داخلی هست و میتونه در طول زمان تغییر کنه — معمولاً در پاسخ به ورودی کاربر یا رویدادهای دیگه. state همون چیزیه که باعث میشه کامپوننت های React تعاملی بشن.

ویژگیهای اصلی state:

• قابل تغییر (mutable، با استفاده از setState یا useState)
• محلی و برای خود کامپوننت هست
• در فانکشنال کامپوننت با useState تعریف میشه

مثال:

import { useState } from 'react';

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

  return (
    <>
      <p>{count}</p>
      <button ={() => setCount(count + 1)}>Increase</button>
    </>
  );
}

استفاده همزمان از Props و State

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

مثال:

function Avatar({ person, size }) {
  return (
    <img
      src={`https://image.com/${person.imageId}.jpg`}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Profile() {
  const [size, setSize] = useState(100);

  return (
    <>
      <Avatar
        person={{ name: 'Soheil Jafarnejad', imageId: 'YfeOqp2' }}
        size={size}
      />
      <button ={() => setSize(size + 20)}>
        Increase size
      </button>
    </>
  );
}

در اینجا:

• مقدارsize توسط state در کامپوننت والد (Profile) مدیریت میشه
• و به صورت prop به کامپوننت فرزند (Avatar) فرستاده میشه

این الگوی رایجی در React هست: state به بالا برده میشه (Lifting State Up) و props به پایین داده میشن (Data Down).

خلاصه

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

از این مقاله خوشت اومد؟

اگه این مقاله برات مفید بود، خوشحال میشم اونو به اشتراک بذاری یا نظرت رو بنویسی! ریکت ابزار قدرتمندیه — ولی فقط وقتی که بدونی چطور داده ها رو به درستی بین کامپوننت هات مدیریت کنی. فهم تفاوت بین props و state یکی از پایه های ساختن رابط کاربری هوشمند و مقیاس پذیر در React هست.