درک گزاره کلیدی React

“Using the key prop when rendering a list with React” را در egghead.io تماشا کنید
(بخشی از راهنمای مبتدیان ReactJS).

با این شکل بازی کنید:

به طور خاص، سعی کنید موضوع را تغییر دهید، سپس موضوع را تغییر دهید و به این توجه کنید
مقدار در فیلد ورودی به موضوع معقول‌تری تغییر نمی‌کند. حتی اگر
چیزی مانند “شرکت من نیاز به آموزش دارد” را تایپ می کنید و سپس موضوع را تغییر می دهید
از “آموزش” تا “سوال” عاقلانه تر است که آن را بازنشانی کنید
مشروط به پیش‌فرض بهتر

حالا این یکی را امتحان کنید:

اکنون همانطور که انتظار می رود کار می کند. در اینجا عملکرد است و من آن را برجسته می کنم
تفاوت:

const defaultValuesByTopic = {
	training: 'I would like some training',
	consulting: 'I have consulting needs',
	question: 'I have some questions',
}

function Contact() {
	const [topic, setTopic] = React.useState('training')

	return (
		form>
			label htmlFor="topic">Topiclabel>
			select
				id="topic"
				value={topic}
				onChange={(e) => setTopic(e.target.value)}
			>
				option value="training">Trainingoption>
				option value="consulting">Consultingoption>
				option value="question">Questionoption>
			select>
			label htmlFor="subject">Email Subjectlabel>
			input
				id="subject"
				key={topic}
				defaultValue={defaultValuesByTopic[topic]}
			/>
			label htmlFor="body">Email bodylabel>
			textarea id="body" />
		form>
	)
}

تنها تفاوت بین این پیاده سازی ها این است که یکی از کارها دارای a است
key پشتیبانی کند و دیگری نه.

من می خواهم یک ترفند کوچک را با شما به اشتراک بگذارم، نه به این دلیل که اغلب از آن استفاده می کنم (هنوز
این دقیقاً همان کاری است که من در صفحه تماس خود انجام می دهم) اما به دلیل
درک این اصل به شما کمک می کند تا React را کمی بهتر درک کنید. وجود دارد
در مورد «نمونه‌هایی» از یک جزء React و نحوه برخورد React با آنها key پشتیبانی کنید

چیزی که می خواهم به شما نشان دهم ارتباط زیادی با نمونه های عنصر/کامپوننت و
به طور مساوی اعمال می شود مانند اجزای شما در بالا است
بنویس و بکش شاید درک آن با حالت جزء کمی ساده تر باشد، بنابراین
این زاویه ای است که از آن به آن نزدیک می شویم.

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

function Counter() {
	const [count, setCount] = React.useState(0)
	const increment = () => setCount((c) => c + 1)
	return button onClick={increment}>{count}button>
}

ما می توانیم این را چندین بار در صفحه رندر کنیم و هر کدام به طور کامل خواهد بود
مستقل React وضعیت را با هر نمونه جداگانه ذخیره می کند. وقتی یکی
کامپوننت از صفحه حذف می شود، بر دیگران تأثیر نمی گذارد. اگر جدید بسازید
اولاً بر اجزای موجود تأثیر نمی گذارد.

ممکن است این را در React بدانید key prop چیزی است که باید روی عناصر قرار دهید
وقتی به یک آرایه نقشه می‌زنید (در غیر این صورت React از دست شما عصبانی خواهد شد).

نکته جانبی: اگر می خواهید بدانید چرا این کار ضروری است و اگر چه اتفاقی می افتد
نادیده بگیر یا فقط بگو index به عنوان یک ساعت کلیدی «از استراحتگاه کلید استفاده کنید
هنگام ارائه لیستی ازواکنش نشان دادن”

واکنش نشان دهید key prop به شما اجازه می دهد تا نمونه های جزء را کنترل کنید. همه
وقتی React اجزای شما را رندر می‌کند، توابع شما را برای واکشی فراخوانی می‌کند
عناصر React جدیدی که برای به روز رسانی DOM استفاده می کند. اگر همان را برگردانید
انواع عناصر، آن کامپوننت ها/گره های DOM را در اطراف نگه می دارد، حتی اگر همه چیزها را داشته باشند
تغییر کرد.

برای اطلاعات بیشتر، یک ترفند ساده برای بهینه سازی React را بخوانید
تصویربرداری مجدد

ستاره روی کلمه “همه” در بالا چیزی است که می خواهم در اینجا در مورد آن صحبت کنم. را
از این امر مستثنی است key پشتیبانی این به شما امکان می دهد دقیقاً همان را برگردانید
نوع عنصر، اما React را مجبور می‌کند تا نمونه قبلی را جدا کرده و نمونه جدیدی را نصب کند
یکی این بدان معناست که تمام حالتی که در آن زمان در کامپوننت وجود داشته است
به طور کامل حذف شده و مؤلفه برای همه مقاصد “دوباره راه اندازی” می شود
اهداف برای کامپوننت‌ها، این بدان معناست که React پاکسازی را روی افکت‌ها (یا
componentWillUnmount، سپس مقداردهی اولیه حالت (یا
constructor) و اثر برگشت تماس (یا componentDidMount).

توجه: پاکسازی اثر در واقع اتفاق می‌افتد بعد از جزء جدید بود
نصب شده است، اما قبل از اجرای فراخوان افکت بعدی.

در اینجا یک مثال ساده از این کار در یک شمارنده آورده شده است:

function Counter() {
	console.log('Counter called')

	const [count, setCount] = React.useState(() => {
		console.log('Counter useState initializer')
		return 0
	})
	const increment = () => setCount((c) => c + 1)

	React.useEffect(() => {
		console.log('Counter useEffect callback')
		return () => {
			console.log('Counter useEffect cleanup')
		}
	}, [])

	console.log('Counter returning react elements')
	return button onClick={increment}>{count}button>
}

function CounterParent() {
	// using useReducer this way basically ensures that any time you call
	// setCounterKey, the `counterKey` is set to a new value which will
	// make the `key` different resulting in React unmounting the previous
	// component and mounting a new one.
	const [counterKey, setCounterKey] = React.useReducer((c) => c + 1, 0)
	return (
		div>
			button onClick={setCounterKey}>resetbutton>
			Counter key={counterKey} />
		div>
	)
}

و در اینجا تصویر آن است:

در اینجا یک مثال مشروح از مواردی است که اگر روی شمارنده کلیک کنم ثبت می شود
را فشار دهید، سپس روی تنظیم مجدد کلیک کنید:

// getting mounted
Counter called
Counter useState initializer
Counter returning react elements
// now it's mounted
Counter useEffect callback

// click the counter button
Counter called
Counter returning react elements
// notice the initializer and effect callback are not called this time

// click the reset button in the parent
// these next logs are happening for our new instance
Counter called
Counter useState initializer
Counter returning react elements

// cleanup old instance
Counter useEffect cleanup

// new instance is now mounted
Counter useEffect callback

باز هم، این اتفاق برای وضعیت عناصر شکل طبیعی (برای
چیزهایی مانند value و حتی تمرکز). را key تکیه گاه فقط برای خلاص شدن از شر آن نیست
از آن خطای آزاردهنده کنسول React زمانی که می‌خواهید آرایه‌ای از عناصر را رندر کنید
(همه خطاهای “آزاردهنده” React عالی هستند و به شما کمک می کنند تا از اشکالات جلوگیری کنید، پس لطفاً
آنها را نادیده نگیرید). را key پشتیبانی نیز می تواند مکانیزم مفیدی برای
کنترل نمونه های کامپوننت و عنصر React.

امیدوارم جالب/آموزنده بوده باشد. اگر می خواهید با یکی از آنها بازی کنید
این کد
من یک جعبه کد برای آن در اینجا دارم.
از آن لذت ببرید!