React-ի useTransition կատարողականության օպտիմիզացիայի հուք

useTransition կատարողականության օպտիմիզացիայի հուքը մեզ թույլ է տալիս թարմացնել սթեյթերը՝ առանց գրաֆիկական ինտերֆեյսը բլոկելու:

Այս հuk-ի օգնությամբ մենք կարող ենք որևէ սթեյթի թարմացմանը նշանակել ցածր առաջնահերթություն, ինչը կթույլատրի այլ սթեյթների թարմացումներին ունենալ բարձր առաջնահերթություն և կատարվել առանց ուշացման:

Որպես օրինակ կարելի է բերել ապրանքների բացվող ցուցակի ֆիլտրումը՝ օգտագործողի կողմից դաշտում նիշեր մուտքագրելու ժամանակ: Իհարկե, ցուցակը կարող է ցուցադրվել որոշակի ուշացմամբ, բայց մենք չէինք ցանկանա, որ նիշերը դաշտում մուտքագրվեն ուշացմամբ:

Եկեք տեսնենք, թե ինչպես կարող է օգնել մեզ useTransition հուքը նման դեպքերում: Ենթադրենք, ունենք հիմնական կոմպոնենտի կոդի մի հատված: Եկեք վերլուծենք այն.

App.jsximport { 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 ֆունկցիան այն ֆունկցիան է, որ և թույլ է տալիս նվազեցնել թարմացման առաջնահերթությունը.

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

Մենք նաև ունենք filterTerm սթեյթ, որտեղ պահվում է դաշտում մուտքագրվող արտահայտությունը և setFilterTerm ֆունկցիան այն սահմանելու համար.

App.jsxconst [filterTerm, setFilterTerm] = useState('');

Դաշտում նիշեր մուտքագրելիս ամեն անգամ կանչվում է updateFilterHandler ֆունկցիան, որտեղ տեղի է ունենում filterTerm-ի թարմացում: Հենց այստեղ ենք մենք կիրառում մեր useTransition հուքը՝ setFilterTerm սահմանման ֆունկցիան փաթաթելով startTransition-ի մեջ հետևյալ կերպ.

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

Այսպիսով, մենք սահմանեցինք filterTerm սթեյթի թարմացման համար ցածր առաջնահերթություն և մեր մուտքագրման դաշտը կմնա արձագանքող:

isPending փոփոխականի օգնությամբ մենք կարող ենք ցույց տալ օգտագործողին, որ ցուցակի թարմացումը դեռ ընթացքի մեջ է: Եկեք ցույց տանք այս տեղեկությունը մուտքագրման դաշտի տակ, մինչ ցուցակը թարմացվում է.

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