React-ի useDeferredValue Արդյունավետության օպտիմիզացիայի հուք

useDeferredValue արդյունավետության օպտիմիզացիայի հուքը, ճիշտ ինչպես useTransition-ը, օգնում է արագացնել գրաֆիկական ինտերֆեյսի աշխատանքը, սակայն դա անում է մի փոքր այլ կերպ։

Նայեք նախորդ դասին և տեսեք, թե ինչպես useTransition-ի դեպքում մենք պարուրում էինք setFilterTerm թարմացման ֆունկցիան։ Այսպիսով, սթեյթը թարմացնող կոդը միշտ չէ, որ հասանելի է լինում։ Այն կարող է թաքնված լինել, օրինակ, ձեր միացրած գրադարանում։ Այս դեպքում մենք կարող ենք օգտագործել useDeferredValue հուկը։ Այդ ժամանակ մենք պետք է պարուրենք կամ հենց սթեյթը, կամ այդ սթեյթի միջոցով հաշվարկված արդյունքը՝ դրանով իսկ նվազեցնելով դրա առաջնահերթությունը։

Եկեք վերլուծենք ProductList երեխա կոմպոնենտի կոդի հետևյալ հատվածը.

ProductList.jsximport {useDeferredValue} from 'react'

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

Ուշադրություն դարձրեք, որ այստեղ մենք useDeferredValue-ով պարուրեցինք հենց products փոփոխականը, որը մենք վերցրեցինք կոմպոնենտի պրոպսերից։ Ապա արդյունքը գրեցինք deferredProducts-ի մեջ, որի հետ էլ հաջորդում կաշխատենք.

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Այժմ, եթե գլխավոր կոմպոնենտի կոդի այն հատվածում, որը մենք դիտարկեցինք նախորդ դասին, հանենք տողը.

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

Եվ isPending-ի օգտագործման տողը.

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

Եվ նաև հանենք պարույրը setFilterTerm ֆունկցիայից, ապա կստանանք նույն արդյունքը, ինչ նախորդ դասում.

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