Хуки оптимизатсияи суръати коркарди useDeferredValue дар React

Хуки оптимизатсияи суръати коркарди useDeferredValue, ҳамчунон ки useTransition, ба зудкор кардани кори интерфейси графикӣ кумак мекунад, аммо ин кореро каме бо дигар роҳ анҷом медиҳад.

Ба дарси гузашта назар андозед ва бинед, ки дар ҳолати useTransition мо функсияи навсозии setFilterTerm-ро ба рӯй мекашидем. Ҳамин тавр, рамзи навсозии ҳолат ҳамеша дастрас намешавад. Он метавонад пинҳон бошад, масалан, дар китобхонае, ки шумо пайваст кардаед. Дар ин ҳолат мо метавонем аз хуки useDeferredValue истифода барем. Он гоҳ ба мо лозим аст ки ё худи ҳолатро, ё натиҷаеро, ки бо истифода аз ин ҳолат ҳисоб карда мешавад, ба рӯй кунем, то онро дар афзалият паст кунем.

Биёед порчаи зерини рамзи таркибии фарзандии ProductList-ро таҳлил кунем:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Диққат диҳед, ки дар ин ҷо мо ба useDeferredValue худи тағирёбандаи products-ро ба рӯй кардем, ки мо онро аз пропсҳои компонент гирифтем. Баъд мо натиҷаро ба deferredProducts сабт кардем, ки бо он кор хоҳем кард:

const deferredProducts = useDeferredValue(products);

Акнун, агар дар порчаи рамзи компоненти асосӣ, ки мо дар дарси гузашта баррасӣ кардем, сатри зеринро нест кунем:

const [isPending, startTransition] = useTransition();

Ва сатрро бо истифода аз isPending:

{isPending && <p>навсозӣ ...</p>}

Ва ҳамчунин рӯйпӯшро аз функсияи setFilterTerm бардорем, пас мо ҳамон натиҷаеро мегирем, ки дар дарси гузашта буд:

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