Хуки оптимализатсияи иҷроия useTransition дар React

Хуки оптимализатсияи иҷроия useTransition ба мо имкон медиҳад, ки state-ҳоро бе бастани интерфейси графикӣ нав кунем.

Бо ёрии ин хуқ мо метавонем ба навсозии ягон state афзалиятҳои пастро муқаррар кунем, ки ба навсозии state-ҳои дигар имкон медиҳад, ки афзалиятҳои баланд дошта ва бе таъхир иҷро шаванд.

Чун мисол метавон филтр кардани феҳристи рӯйхати маҳсулотро дар ворид кардани корбар аломатҳо ба майдони ҷустуҷӯ овард. Албатта, худи рӯйхат метавонад бо якчанд таъхир намоиш дода шавад, аммо мо намехоҳем, ки аломатҳо ба майдони ҷустуҷӯ бо таъхир ворид карда шаванд.

Биёед бубинем, ки дар чунин ҳолатҳо чӣ гуна хуқ useTransition ба мо кӯмак карда метавонад. Фарз мекунем, ки мо як порчаи коди асосиро компонент дорем. Биёед онро таҳлил кунем:

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>
	);
}

Дар ин ҷо мо ду тағирёбандаро барои useTransition мебинем. Тағирёбандаи isPending арзиши булӣ дорад ва нишон медиҳад, ки оё раванди навсозӣ тамом шудааст ё не, ва startTransition функсияеро, ки барои коҳиш додани афзалиятҳои навсозӣ имкон медиҳад:

const [isPending, startTransition] = useTransition();

Инчунин мо state-и filterTerm дорем, ки дар он ибораи воридшуда ба майдони воридот нигоҳ дошта мешавад ва функсияи setFilterTerm барои муқаррар кардани он:

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

Ҳар вақте ки аломатҳо ба input ворид карда мешаванд, ҳар дафъа функсияи updateFilterHandler фарохонӣ мешавад, ки дар он навсозии filterTerm рух медиҳад. Айнан дар ин ҷост, ки мо хуқи худ useTransition-ро истифода мебарем, бо печонидани функсияи муқарраркунии setFilterTerm ба startTransition ба тариқи зерин:

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

Ҳамин тариқ, мо барои навсозии state-и filterTerm афзалиятҳои пастро муқаррар кардем ва майдони воридии мо ба суолҳо посухгӯ хоҳад монд.

Бо ёрии тағирёбандаи isPending мо метавонем ба корбар нишон диҳем, ки навсозии рӯйхат ҳанӯз дар раванд аст. Ин маълумотро зери майдони воридот барои муддате, ки рӯйхат нав мешавад, хориҷ кунем:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>дар ҳоли навсозӣ ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);