پراپس دقیقا چیه و چیکار میکنه ؟

در فریم ورک های جاوا اسکریپت وقتی داریم کامپوننت هارو میسازیم برای اینکه بتونیم کامپوننت هارو داینامیک کنیم یا به عبارت دیگر کامپوننت به گونه ای تعریف شود که بتونیم از اون بارها و بارها استفاده کنیم تا مجبور به نوشتن کدهای تکراری نباشیم باید از props استفاده کنیم. props میتونه هر نوع داده ای باشه string , boolean , array , object یا حتی function باشه.

در ری اکت اکثر اوقات نیازه یک سری دیتا هارو  از کامپوننت والد به کامپوننت فرزند ارسال کنیم ، که برای اینکار از پراپس استفاده میکنیم  خب طریقه ارسال به این صورت است :

const Parent = () => {
	const name = 'tarhche'
	return (
		<child name={name} />
	)
}
export default Parent

در مثال بالا ما برای اینکه دیتا رو ارسال کنیم از پراپرتی name به عنوان key و از متغییر name به عنوان value یا دیتایی قرار است ارسال شود استفاده کردیم .
حالا میتونیم بریم در کامپوننت فرزند و در داخل کامپوننت props ارسالی رو دریافت کنیم :
 

const Child = (props) => {
	console.log(props.name)
	return (
	 <p>you are on the {props.name} website.</p>
	)
}
export default Child

استفاده از props با destructuring

برای  دریافت props ارسال شده ما باید آبجکت props رو به عنوان پارامتر قرار بدیم حالا میتونیم از درون آبجکت  props به دیتای ارسالی که همون name هست دسترسی پیدا کنیم که البته میتونیم به جای نوشتن props از قابلیت destructuring در جاوا اسکریپت استفاده کنیم و کد رو به صورت زیر  ساده تر کنیم : 
 

const Child = ({name}) => {
	console.log(name)
	return (
	 <p>you are on the {name} website.<p>
	)
}
export default Child

 جمع بندی 

• props باعث میشه که کامپوننت قابل استفاده مجدد باشه و ازنوشتن کد های تکراری جلوگیری میکنه .
• props باعث میشه که یک کامپوننت در شرایط مختلف رفتار متناسبی داشته باشه. به عنوان مثال میتونیم به کارت های محصول در سبد خرید اشاره کرد که هر کدوم محتوای خاص خودشون رو دارند.
• کامپوننت های والد میتونن رفتار کامپوننت های فرزند رو کنترل کنن و مشخص کنن که چه خروجی در کامپوننت فرزند نمایش داده بشه. این کنترل، به وسیله Props در ریکت صورت میگیره.