React Fundamentals: Props vs State

بیایید امکانات و وضعیت را با هم مقایسه کنیم. در اینجا تعریفی از هر کدام آورده شده است:

• “props” (مخفف “properties”) یک شی از ورودی های دلخواه React است
  جزء تابع به عنوان اولین آرگومان در نظر گرفته می شود.
• “وضعیت” داده ای است که در طول عمر یک نمونه خاص از a تغییر می کند
  کامپوننت واکنش.

بیایید در هر کدام شیرجه بزنیم.

به props به عنوان آرگومان های یک تابع فکر کنید. اجزای React توابعی هستند که
JSX را برمی گرداند (یا به طور کلی چیزی که می تواند به عنوان عناصر React ارائه شود،
null، رشته و غیره). معمولا زمانی که شما یک قطعه کد داشته باشید
می‌خواهید دوباره استفاده کنید، می‌توانید این کد را در یک تابع و هر مقدار پویا قرار دهید
این کد استفاده شده از قبل می تواند به عنوان آرگومان ارسال شود (به عنوان مثال
const five = 2 + 3 می تواند به یک تابع مشتق شود و آرگومان هایی مانند
بنابراین const five = add(2, 3)).

همین امر در مورد یک قطعه JSX نیز صدق می کند، اما به جای اینکه آن را به صورت عادی فراخوانی کنیم
تابع (add(2, 3)) از نحو JSX استفاده کنید (). را
“ویژگی” ارائه شده در JSX همان چیزی است که به آن می گویند props و تنظیم می شوند
با هم در یک شیء و به Add تابع جزء به عنوان
اولین استدلال مانند این:

function Add(props) {
	return (
		div>
			{props.n1} + {props.n2} = {props.n1 + props.n2}
		div>
	)
}

اگر بخواهم از این به این صورت استفاده کنم:

Add n1={2} n2={3} />

در اینجا نحوه نمایش داده می شود:

توجه: لوازم جانبی می تواند هر چیزی باشد. در مثال ما، آنها اعداد هستند، اما می توانند
رشته ها، آرایه ها، اشیا، توابع و غیره هستند (و اغلب هم هستند).

فرض کنید ما یک پیش فرض می خواهیم n2 به 0 در صورتی که کسی این کار را نکند
آن را فراهم کنید (مانند ). یکی از محدودیت های وسایل این است که شما نیستید
اجازه تغییر آنها را داده است. بنابراین شما نمی توانید چنین کاری را انجام دهید:

function Add(props) {
	if (typeof props.n2 === 'undefined') {
		props.n2 = 0
	}
	return (
		div>
			{props.n1} + {props.n2} = {props.n1 + props.n2}
		div>
	)
}

اگر بخواهیم این کار را انجام دهیم، با خطای زیر مواجه می شویم:

TypeError: Cannot add property n2, object is not extensible

با این حال، این به اندازه کافی ساده برای حل است:

function Add(props) {
	let n2 = props.n2
	if (typeof n2 === 'undefined') {
		n2 = 0
	}
	return (
		div>
			{props.n1} + {n2} = {props.n1 + n2}
		div>
	)
}

یا اغلب افرادی را می یابید که از ساختار ساختاری با مقادیر پیش فرض مانند استفاده می کنند
خوب (این ترجیح شخصی من است):

function Add({ n1, n2 = 0 }) {
	return (
		div>
			{n1} + {n2} = {n1 + n2}
		div>
	)
}

این عالی است، اما اگر بخواهم ارزش پایه را به صورت پویا تغییر دهم، چه؟ اجازه دهید
بگو من می خواستم چیزی شبیه به این ایجاد کنم:

بدون تابعیت، در اینجا نحوه تلاش من برای رسیدن به این هدف آمده است:

function AddWithInput(props) {
	function handleInputChange(event) {
		const input = event.target
		const newN2 = Number(input.value)
		props.n2 = newN2
	}
	return (
		div>
			{props.n1} +{' '}
			input type="number" value={props.n2} onChange={handleInputChange} /> ={' '}
			{props.n1 + props.n2}
		div>
	)
}

با این حال، این کار به دو دلیل کار نخواهد کرد:

1. React نمی داند که ما به روز رسانی کرده ایم n2 ارزش ما props شیء،
   بنابراین وقتی ما تغییر می دهیم DOM را به روز نمی کند props.n2، بنابراین ما مال خود را نخواهیم دید
   به هر حال تغییر کند
2. ما آن را می گیریم TypeError اخطار مثل قبل

اینجاست که دولت مداخله می کند.

حالت داده‌ای است که در طول زمان تغییر می‌کند و این برای وضعیت ما عالی است:

function AddWithInput(props) {
	const [n2, setN2] = React.useState(0)

	function handleInputChange(event) {
		const input = event.target
		const newN2 = Number(input.value)
		setN2(newN2)
	}

	return (
		div>
			{props.n1} +{' '}
			input type="number" value={n2} onChange={handleInputChange} /> ={' '}
			{props.n1 + n2}
		div>
	)
}

این کار خواهد کرد، و این دقیقا همان چیزی است که React State برای آن استفاده می شود
برای برای ردیابی مقادیر داده در طول عمر کامپوننت طراحی شده است (بنابراین
در حالی که جزء در صفحه وجود دارد).

با این حال، کاربران از AddWithInput مؤلفه دیگر نمی تواند مقدار اولیه را تنظیم کند
ارزش از n2 در حال حاضر با روشی که در حال حاضر این مؤلفه پیاده سازی شده است،
فوروارد نمی کند props.n2 اصلا اما ما می‌توانیم این کار را با استفاده از لوازم جانبی انجام دهیم
وقتی حالت خود را مقداردهی اولیه می کنیم:

function AddWithInput(props) {
	const [n2, setN2] = React.useState(props.n2)

	// ... etc...
}

حالا اگر کسی این کار را انجام دهد: سپس نتیجه
به این شکل خواهد بود (توجه داشته باشید که مقدار ورودی اولیه است 3):

بنابراین پروپوزال‌های ما «آرگمون‌ها» یا «ورودی‌ها» هستند که می‌توانیم آن‌ها را به یک مؤلفه منتقل کنیم، و
state چیزی است که در کامپوننت مدیریت می شود و می توان آن را تغییر داد
زمان

اجازه دهید این کامپوننت را کمی پاک کنم و تغییراتم را توضیح دهم:

function AddWithInput({ n1, initialN2 = 0 }) {
	const [n2, setN2] = React.useState(initialN2)

	function handleInputChange(event) {
		const input = event.target
		const newN2 = Number(input.value)
		setN2(newN2)
	}

	return (
		div>
			{n1} + input type="number" value={n2} onChange={handleInputChange} /> ={' '}
			{n1 + n2}
		div>
	)
}

من با تنظیمات پیش‌فرض برای پایه‌ها به destructuring تغییر دادم و strut را تغییر دادم
از n2 به initialN2. وقتی از یک مقدار prop برای مقداردهی اولیه یک حالت استفاده می کنم
ارزش، من معمولاً دوست دارم آن را با پیشوند بگذارم initial برای گزارش این
تغییرات این پشتیبانی در نظر گرفته نخواهد شد. اگر این چیزی است که شما می خواهید
سپس شما می خواهید
ایالت را بالا ببرد.

امیدوارم این به روشن شدن تفاوت بین props و state در React for کمک کند
شما این یک مفهوم اساسی است. پیش بروید و خود را با این برنامه کوچک آزمایش کنید
زیر دولت کجاست، لوازم کجاست؟

خطا در جاسازی https://codesandbox.io/s/react-codesandbox-oov7o?view=editor

امیدوارم این مفید باشد! موفق باشید!