Hook Pengoptimuman Prestasi useTransition dalam React

Hook pengoptimuman prestasi useTransition membolehkan kita mengemaskini state tanpa menyekat antara muka grafik.

Dengan hook ini, kita boleh menetapkan kemaskini sesuatu state keutamaan rendah, yang membolehkan kemaskini state lain mempunyai keutamaan tinggi dan dilaksanakan tanpa kelewatan.

Sebagai contoh, kita boleh mengambil penapisan senarai juntai bawah produk semasa pengguna memasukkan aksara dalam medan carian. Sudah tentu, senarai itu sendiri mungkin dipaparkan dengan beberapa kelewatan, tetapi kita tidak mahu aksara dimasukkan ke dalam medan carian dengan kelewatan.

Mari kita lihat bagaimana dalam kes sedemikian hook useTransition boleh membantu kita. Katakan, kita mempunyai sepotong kod komponen utama. Mari kita analisisnya:

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

Di sini kita melihat dua pembolehubah untuk useTransition. Pembolehubah isPending mengandungi nilai boolean dan menunjukkan sama ada proses kemaskini telah selesai, manakala startTransition ialah fungsi yang membolehkan pengurangan keutamaan kemaskini:

const [isPending, startTransition] = useTransition();

Kami juga mempunyai state filterTerm, di mana ungkapan yang dimasukkan ke dalam medan input disimpan, dan fungsi setFilterTerm untuk menetapkannya:

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

Apabila aksara dimasukkan ke dalam input, kami setiap kali memanggil fungsi updateFilterHandler, di mana kemaskini filterTerm berlaku. Di sinilah kami menggunakan hook kami useTransition, dengan membungkus fungsi penetapan setFilterTerm dalam startTransition seperti berikut:

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

Dengan itu, kami telah menetapkan untuk kemaskini state filterTerm sebagai rendah keutamaan dan medan input kami akan kekal responsif.

Melalui pembolehubah isPending, kami boleh menunjukkan kepada pengguna bahawa kemaskini senarai masih dalam proses. Mari paparkan maklumat ini di bawah medan input, semasa senarai dikemaskini:

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