Huk za optimizacijo zmogljivosti useDeferredValue v Reactu

Huk za optimizacijo zmogljivosti useDeferredValue, tako kot useTransition, pomaga pospešiti delo grafičnega vmesnika, vendar to naredi nekoliko drugače.

Oglejte si prejšnjo lekcijo in poglejte, kako smo v primeru z useTransition ovili funkcijo posodabljanja setFilterTerm. Torej, koda za posodobitev stanja ni vedno na voljo. Lahko je skrita, na primer v knjižnici, ki ste jo priklopili. V tem primeru lahko uporabimo huk useDeferredValue. Takrat moramo oviti ali samo stanje, ali rezultat, izračunan s tem stanjem, s čimer zmanjšamo njegovo prioriteto.

Analizirajmo naslednji del kode podrejenega komponenta ProductList:

ProductList.jsximport {useDeferredValue} from 'react'

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

Upoštevajte, da smo tukaj ovili v useDeferredValue samo spremenljivko products, ki smo jo vzeli iz lastnosti komponenta. Nato smo zapisali rezultat v deferredProducts, s katero bomo delali naprej:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

Zdaj, če v delu kode glavnega komponenta, ki smo ga obravnavali v prejšnji lekciji, odstranimo vrstico:

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

In vrstico z uporabo isPending:

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

In odstranimo ovoj s funkcije setFilterTerm, potem dobimo enak rezultat kot v prejšnji lekciji:

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