Reactdagi useTransition Unumdorlik Optimallashtirish Huki

useTransition unumdorlik optimallashtirish huki bizga grafik interfeysni bloklamasdan holatlar yangilash imkonini beradi.

Ushbu huk yordamida biz ba'zi bir holatni yangilashga past prioritet belgilashimiz mumkin, bu esa boshqa holatlarning yangilanishiga yuqori prioritet beradi va ular kechikishsiz bajariladi.

Misol sifatida foydalanuvchi qidiruv maydoniga belgilar kiritayotganda mahsulotlarning ochiladigan ro'yxatini filtrlashni keltirish mumkin. Albatta, ro'yxatning o'zi ma'lum bir kechikish bilan ko'rsatilishi mumkin, lekin biz qidiruv maydoniga belgilar kechikish bilan kiritilishini istamaymiz.

Keling, bunday hollarda useTransition huki qanday yordam berishini ko'rib chiqaylik. Faraz qilaylik, bizda asosiy komponentning bir qismi kodi bor. Keling, uni tahlil qilaylik:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Bu yerda biz useTransition uchun ikkita o'zgaruvchini ko'ryapmiz. isPending o'zgaruvchisi mantiqiy qiymatni o'z ichiga oladi va yangilash jarayoni tugaganligini ko'rsatadi, startTransition funksiyasi esa yangilash prioritetini pasaytirish imkonini beradi:

const [isPending, startTransition] = useTransition();

Shuningdek, bizda filterTerm holati mavjud, unda kiritish maydoniga kiritilayotgan ifoda saqlanadi va uni o'rnatish uchun setFilterTerm funksiyasi mavjud:

const [filterTerm, setFilterTerm] = useState('');

Inputga belgilar kiritilganda har safar bizning updateFilterHandler funksiyasi chaqiriladi, unda filterTerm yangilanadi. Aynan shu yerda biz useTransition hukimizni qo'llaymiz, setFilterTerm o'rnatish funksiyasini startTransition ichiga quyidagicha o'rab qo'yamiz:

function updateFilterHandler(event) {
	startTransition(() => {
		setFilterTerm(event.target.value);
	});
}

Shunday qilib, biz filterTerm holatini yangilash uchun past prioritet belgiladik va bizning kiritish maydoni sezgir bo'lib qoladi.

isPending o'zgaruvchisi yordamida biz foydalanuvchiga ro'yxat yangilanishi hali jarayonda ekanligini ko'rsatishimiz mumkin. Keling, ro'yxat yangilanishi davomida ushbu ma'lumotni kiritish maydoni ostida chiqaraylik:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>yangilanmoqda ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);