Reactdagi useDeferredValue Unumdorlik Optimallashtirish Huki

Unumdorlikni optimallashtirish huki useDeferredValue, xuddi useTransition kabi, grafik interfeysning ishlash tezligini oshirishga yordam beradi, lekin buni biroz boshqacha usulda amalga oshiradi.

O'tgan darsga qarang va useTransition bilan qanday qilib biz setFilterTerm yangilash funksiyasini o'rab qo'yganimizni ko'ring. Holatni yangilash kodi har doim ham qo'l ostida bo'lmasligi mumkin. U, masalan, siz ulagan kutubxonada yashirangan bo'lishi mumkin. Bunday holatda biz useDeferredValue hookidan foydalanishimiz mumkin. Bu holda biz yoki holatning o'zini, yoki ushbu holat yordamida hisoblangan natijani o'rab, shu orqali uning ustuvorligini pasaytirishimiz kerak bo'ladi.

Keling, ProductList child komponentining quyidagi kod bo'lagini tahlil qilaylik:

ProductList.jsximport {useDeferredValue} from 'react'

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

E'tibor bering, bu yerda biz komponent propslaridan olgan products o'zgaruvchisining o'zini useDeferredValue ga o'rab qo'ydik. Keyin natijani deferredProducts ga yozdik va keyingi ishlarimizni shu bilan olib boramiz:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Endi, agar biz o'tgan darsda ko'rib chiqqan asosiy komponent kod bo'lagidan quyidagi qatorni olib tashlasak:

App.jsxconst [isPending, startTransition] = useTransition();

Va isPending dan foydalanish qatorini:

App.jsx{isPending && <p>yangilanmoqda ...</p>}

Shuningdek, setFilterTerm funksiyasining o'rab qo'yilishini olib tashlasak, biz o'tgan darsdagi natijaga o'xshash natijaga erishamiz:

App.jsxfunction updateFilterHandler(event) {
  setFilterTerm(event.target.value);
}