سلام دوستان! توی این پست از مجموعه پست‌های ری‌اکت ۱۰۱ می‌خوایم با چند نکته کاربردی از Props یا همون پراپرتی‌ها توی ری‌اکت آشنا بشیم. قبل از اون بیاید یک آشنایی کلی با این ویژگی داشته باشیم.

 

Props چیه؟ 🤔

Props مخفف Properties و یک ویژگی مهم توی ری‌اکت هست که اجازه میده بین کامپوننت‌های والد و فرزند اطلاعات رد و بدل کنیم. این کار باعث میشه که کامپوننت‌هایی داینامیک و با قابلیت استفاده مجدد (= Reusable) داشته باشیم. همچنین می‌تونیم Encapsulation رو به برنامه بیاریم. هر کامپوننت به این دلیل که فقط با اطلاعات محدود و مشخصی سر و کار داره، باعث میشه برنامه‌ای ماژولار و ایزوله داشته باشیم. این ویژگی رو می‌تونیم به پارامترهای یک تابع تشبیه کنیم:

// function
const counter = (value) => { ... }
counter(10);

// React component
const Counter = ({ value }) => ( ... )
<Counter value={10} />

خب بریم با چند نکته و ترفند درباره پراپرتی‌ها توی ری‌اکت آشنا بشیم 👏

 

نکته‌ها و باید و نبایدهایی درباره پراپرتی‌ها توی ری‌اکت

می‌خوایم با چند نکتهٔ کاربردی از این ویژگی تو ری‌اکت آشنا بشیم:

 

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

مقدار یک پراپرتی نمی‌تونه از داخل کامپوننت تغییر کنه. به قول معروف Immutable و Readonly هستن:

const Counter = (props) => {
  <<props.value = 12;>>

  return <div>{props.value}</div>;
};

export default function App() {
  return (
    <div className="App">
      <Counter value={5} />
      {/* Prints 5, not 12 */}
    </div>
  );
}

توی کد بالا مقدار پراپرتی value رو تغییر دادیم، اما تأثیری روی خروجی نداشت و همون مقدار 5 خط ۱۰ برامون چاپ میشه. البته میشه با ترفند‌هایی مقدار پراپرتی‌ها رو عوض کرد. مثل زمانی که از Destructuring استفاده می‌کنیم. اما به‌طور کلی تغییر دادن مقدار پراپرتی‌ها یک کار غیر استاندارد و Anti-pattern به حساب میاد.

 

۲. از تکنیک Destructuring استفاده کنیم

یکی از راه‌هایی که کمک می‌کنه کدهایی کمتر و خواناتر داشته باشیم استفاده از تکنیک Destructuring هنگام تعریف پراپرتی‌هاست. در حالت عادی هر کامپوننت یک ورودی می‌گیره که یک آبجکت هست که اعضای اون، پراپرتی‌هایی هست که به کامپوننت پاس داده شده:

function Input(props) {
  console.log(props.name);
  console.log(props.type);
}

<Input name="email" type="email" />