تعاملات کاربر را با React دنبال کنید

این پست بایگانی شده است. این API بود
در React 17 حذف شد.

در پست من
“React Production Performance Monitoring”
من به شما نشان می دهم که چگونه از React استفاده کنید Profiler جزء نظارت بر عملکرد
درخواست شما در تولید اطلاعاتی که از این به دست می آورید مفید است، اما
در واقع، تنها چیزی که می‌تواند به شما بگوید این است: «هی، نصب/به‌روزرسانی برای این درخت آغاز شد
کامپوننت ها x زمان گرفتند.” سپس می توانید این داده ها را رسم کرده و آن ها را شناسایی کنید
افزایش عملکرد / رگرسیون برای این بخش از برنامه شما.

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

یکی دیگر از مزایای ردیابی تعامل این است که زمینه ای را به کارهایی که می توانید انجام دهید اضافه می کند
پیش نمایش در تب React DevTools Profiler. ما به زودی آن را بررسی خواهیم کرد.

داده های Profiler شما را صدا می کند onRender متد با دارای خاصیت for است
interactions که قصد دارد این را برای شما فراهم کند. و من می خواهم به شما نشان دهم
نحوه استفاده از این API

🚨 لطفاً به یاد داشته باشید که این یک API ناپایدار/تجربی از React و است
ممکن است زمانی که این ویژگی به طور رسمی منتشر شود تغییر کند.

React تمام برنامه ریزی های خود را از طریق انجام می دهد scheduler بسته بندی معمولا شما
مستقیماً با آن تعامل نداشته باشید، اما این بسته جایی است که به دست خواهید آورد
APIهایی برای ابزارسازی اجزای ردیابی تعامل شما.

فرض کنید یک جزء تبریک ساده دارید:

function Greeting() {
	const [greeting, setGreeting] = React.useState('')

	function handleSubmit(event) {
		event.preventDefault()
		const name = event.target.elements.name.value
		setGreeting(`Hello ${name}`)
	}

	return (
		div>
			form onSubmit={handleSubmit}>
				label htmlFor="name">Name:label>
				input id="name" />
			form>
			div>{greeting}div>
		div>
	)
}

چه زمانی setGreeting نامیده می شود، که باعث بروز رسانی حالت می شود. فرض کنیم داریم
دلیلی برای اندازه گیری این تعامل و نظارت بر آن در دراز مدت (شما اینطور نیست
شما قطعاً می خواهید این پیچیدگی را برای هر تعامل اضافه کنید). در اینجا این است که چگونه ما
این کار را انجام دهید:

// your other imports
import { unstable_trace as trace } from 'scheduler/tracing'

function Greeting() {
	const [greeting, setGreeting] = React.useState('')

	function handleSubmit(event) {
		event.preventDefault()
		const name = event.target.elements.name.value
		trace('form submitted', performance.now(), () => {
			setGreeting(`Hello ${name}`)
		})
	}

	return (
		div>
			form onSubmit={handleSubmit}>
				label htmlFor="name">Name:label>
				input id="name" />
			form>
			div>{greeting}div>
		div>
	)
}

در حال حاضر interactions برای این به روز رسانی شامل اطلاعاتی در مورد آن خواهد بود
یک تعامل خاص بر اساس نام “فرم ارسال شده”.

API ردیابی: trace(id, startTimestamp, callbackThatTrigersUpdates)

بنابراین اگر این تعامل ناهمزمان باشد چه اتفاقی می‌افتد؟ آیا باید یک سرنخ داشته باشیم
برای به روز رسانی وضعیت و سپس یکی دیگر برای به روز رسانی هنگامی که پاسخ می آید
برگشت؟ بهتر نیست این دو آپدیت مرتبط را با هم مرتبط کنیم؟ بله، درست است
من می خواهم! خوشبختانه، پشتیبانی برای این وجود دارد!

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

function Greeting() {
	const [greeting, setGreeting] = React.useState('')

	// please don't judge me, I'm leaving out loading and error states and cancelation
	// to simplify this example!
	const [name, setName] = React.useState('')

	React.useEffect(() => {
		if (!name) {
			return
		}
		const onSuccess = (newGreeting) => setGreeting(newGreeting)
		fetchGreeting(name).then(onSuccess)
	}, [name])

	function handleSubmit(event) {
		event.preventDefault()
		setName(event.target.elements.name.value)
	}

	return (
		div>
			form onSubmit={handleSubmit}>
				label htmlFor="name">Name:label>
				input id="name" />
			form>
			div>{greeting}div>
		div>
	)
}

برای کمک به پیگیری این موضوع، از آن استفاده خواهیم کرد unstable_wrap:

// your other imports
import {
	unstable_trace as trace,
	unstable_wrap as wrap,
} from 'scheduler/tracing'

function Greeting() {
	const [greeting, setGreeting] = React.useState('')

	// please don't judge me, I'm leaving out loading and error states and cancelation
	// to simplify this example!
	const [name, setName] = React.useState('')

	React.useEffect(() => {
		if (!name) {
			return
		}
		trace('name updated', performance.now(), () => {
			const onSuccess = wrap((newGreeting) => setGreeting(newGreeting))
			fetchGreeting(name).then(onSuccess)
		})
	}, [name])

	function handleSubmit(event) {
		event.preventDefault()
		setName(event.target.elements.name.value)
	}

	return (
		div>
			form onSubmit={handleSubmit}>
				label htmlFor="name">Name:label>
				input id="name" />
			form>
			div>{greeting}div>
		div>
	)
}

باحال؟ بله، عالی است! و به آن نگاه کنید، این چیزی است که به نظر می رسد
مانند React DevTools شما:

ادامه دهید و آن را در برنامه خود امتحان کنید. قطعا کمک می کند (به ویژه
چیزهای ناهمزمان این مربع‌های کوچک قابل کلیک هستند، بنابراین شما می‌دانید که کدام کامیت‌ها انجام شده‌اند
از تعامل مستقیم!).

شما می توانید
در اینجا درباره Tracking API بیشتر بدانید.

موفق باشید!